caret彻底的理解css的三角形【通过border】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.caret0{
width:0;
height:0;
border: 5px solid #000;
}
.caret1{
width:0;
height:0;
border-top: 5px solid #000;
border-left: 5px solid #fff;
border-right: 5px solid #fff;
border-bottom: 5px solid #000;
}
.caret2{
width:0;
height:0;
border-top: 5px solid #fff;
border-left: 5px solid #f00;
border-right: 5px solid #f00;
border-bottom: 5px solid #fff;
}
.caret2{
width:0;
height:0;
border-top: 5px solid #fff;
border-left: 5px solid #f00;
border-right: 5px solid #f00;
border-bottom: 5px solid #fff;
}
.caret3{
width:0px;
height: 0px;
border-bottom: 5px solid #000;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.caret4{
width:0px;
height: 0px;
border-right: 5px solid #000;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
.caret5{
width:0px;
height: 0px;
border-top: 5px solid #000;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.caret6{
width:0px;
height: 0px;
border-left: 5px solid #000;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
</style>
</head>
<body>
<h1>通过border的设置的三角形</h1>
<div class="caret0"></div>
<div class="caret1"></div>
<br>
<div class="caret0"></div>
<br>
<div class="caret1"></div>
<br>
<div class="caret2"></div>
<br>
向上的三角形
<div class="caret3"></div>
<br>
向左的三角形
<div class="caret4"></div>
<br>
向下的三角形
<div class="caret5"></div>
<br>
向右的三角形
<div class="caret6"></div>
</body>
</html>
caret彻底的理解css的三角形【通过border】的更多相关文章
- 纯css画三角形
纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...
- CSS 制作三角形原理剖析
使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...
- css绘制三角形原理
1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...
- 经典CSS实现三角形图标原理解析
前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...
- CSS画三角形引发的一些思考
今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...
- CSS实现三角形、梯形、平行四边形、圆形、椭圆形、对话框、自适应正方形
本文篇幅较长,希望能坚持看完,转载请注明出处,如果觉得好文请给个赞吧 CSS实现梯形 CSS实现三角形和梯形主要是依靠border是梯形的特性来做的,有点像相框的那种感觉. 首先我们先给一个正方形设置 ...
- 理解CSS
写在前面的话:对于web开发,html完成网页的structure,css完成网页的presentation,js完成网页的behavior,今天就来说一说css,通过理解一些css的基础概念,能够更 ...
- CSS制作三角形和按钮
CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...
- 深入理解css BFC 模型
如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...
随机推荐
- Iphone JS时间
var end_time = new Date(time).getTime();//月份是实际月份-1 var start_time= new Date(serverTime).getTime(); ...
- C#中MessageBox用法总结
我们在程序中经常会用到MessageBox. MessageBox.Show()共有21中重载方法.现将其常见用法总结如下: 1.MessageBox.Show("Hello~~~~&quo ...
- MySQL Server 5.0 下载与 安装指南[图文] （安装到非系统路径+设置root账号相应password）
软件下载:点我前往下载 安装需知:相应mysql版本号为V5.0 ------------------------------------------------- 安装步骤例如以下: Step1 首 ...
- 【网络协议】TCP的拥塞控制机制
前言 计算机网络中的带宽.交换节点中的缓存和处理机等,都是网络的资源,在某段时间内,若对网络中某一资源的需求超过了该资源所能提供的可用部分,网络的性能就要变坏,这样的情况就叫做拥塞. 所谓拥塞控制,就 ...
- RMAN备份之非归档模式下的备份
Backing Up a Database in NOARCHIVELOG Mode:1.Log into RMAN2.Shutdown immediate from RMAN3.Startup mo ...
- LINQ 基本子句之一 （select/where/group/into)
特别喜欢同事看到我写了一句小排序的时候说,他当然喜欢Linq了,虽然我只是baidu之,不知其然也不知其所以然. 基本格式 var<变量> = from <项目> in < ...
- ASP.NET程序代码优化的七个方面
ASP.NET程序性能优化的七个方面 一.数据库操作 1.用完马上关闭数据库连接 访问数据库资源需要创建连接.打开连接和关闭连接几个操作.这些过程需要多次与数据库交换信息以通过身份验证,比 ...
- java之从字符串比较到==和equals方法区别
我们先看代码 String str1 = new String("hello"); String str2 = "hello"; System.out.prin ...
- Servlet 浅谈（一）
Servlet 的生命周期 类加载.实例化,init方法,service方法,destroy方法.关于这点,后面会有详细介绍. 什么是容器? 因为Servlet没有main方法,所以它受控于另一个Ja ...
- mysql 的基础知识
这边博客,纯为了摘录 mysql 常用的一些操作,如果你已经懂了,可以忽略,谢谢. 最基本的mysql操作 1.查询mysql 的版本和当前时间信息 select version(),current_ ...