项目中案例：

.breadcrumb{height: 40px;line-height: 40px;padding: 0 20px;border-top: 1px solid #f9c700;.breadcrumb-title{text-align: center;font-size: @fontC;//通过定义一个伪类after&:after{position: absolute;content: '';left: 89px;top: 39px;border-top: 9px solid @colorM;//border-left和border-right换成透明色 才能形成三角形 不然是长方形border-left: 12px solid transparent;border-right: 12px solid transparent;//background-color: red;}}

详细讲解

实现三角形的方式很多种。比较简单又比较常用的是利用伪类选择器，在网页上也有很多用到这种效果，比如tips信息提示框。下面是自己写的实心三角形，原理其实很简单，代码都能看懂。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.tri_top, .tri_right, .tri_bottom, .tri_left{width: 150px;height: 100px;background: #CCCCCC;border-radius: 8px;margin: 50px 50px;position: relative;float: left;}.tri_top:before{content: "";width: 0px;height: 0px;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #CCCCCC;position: absolute;top: -10px;left: 65px;}.tri_right:before{content: "";width: 0px;height: 0px;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid #CCCCCC;position: absolute;top: 40px;left: 150px;}.tri_bottom:before{content: "";width: 0px;height: 0px;border-top: 10px solid #CCCCCC;border-left: 10px solid transparent;border-right: 10px solid transparent;position: absolute;top: 100px;left: 70px;}.tri_left:before{content: "";width: 0px;height: 0px;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-right: 10px solid #CCCCCC;position: absolute;top: 40px;left: -10px;}</style></head><body><div class="tri_top"></div>         <!--三角形在上边--><div class="tri_right"></div>       <!--三角形在右边--><div class="tri_bottom"></div>      <!--三角形在底边--><div class="tri_left"></div>        <!--三角形在左边--></body>
</html>

效果图：

空心三角形该怎样实现呢？看看以下代码，你会发现其实代码跟实心三角形的代码都是差不多。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.tri_top, .tri_right, .tri_bottom, .tri_left{width: 150px;height: 100px;border: 1px solid #000000;border-radius: 8px;margin: 50px 50px;position: relative;float: left;}.tri_top:before{content: "";width: 0px;height: 0px;border-left: 15px solid transparent;border-right: 15px solid transparent;border-bottom: 15px solid #000000;position: absolute;top: -15px;left: 65px;}.tri_top:after{content: "";width: 0px;height: 0px;border-left: 14px solid transparent;border-right: 14px solid transparent;border-bottom: 14px solid #FFFFFF;position: absolute;top: -14px;left: 66px;}.tri_right:before{content: "";width: 0px;height: 0px;border-top: 15px solid transparent;border-bottom: 15px solid transparent;border-left: 15px solid #000000;position: absolute;top: 39px;left: 150px;}.tri_right:after{content: "";width: 0px;height: 0px;border-top: 14px solid transparent;border-bottom: 14px solid transparent;border-left: 14px solid #FFFFFF;position: absolute;top: 40px;left: 149px;}.tri_bottom:before{content: "";width: 0px;height: 0px;border-top: 15px solid #000000;border-left: 15px solid transparent;border-right: 15px solid transparent;position: absolute;top: 101px;left: 69px;}.tri_bottom:after{content: "";width: 0px;height: 0px;border-top: 14px solid #FFFFFF;border-left: 14px solid transparent;border-right: 14px solid transparent;position: absolute;top: 100px;left: 70px;}.tri_left:before{content: "";width: 0px;height: 0px;border-top: 15px solid transparent;border-bottom: 15px solid transparent;border-right: 15px solid #000000;position: absolute;top: 40px;left: -15px;}.tri_left:after{content: "";width: 0px;height: 0px;border-top: 14px solid transparent;border-bottom: 14px solid transparent;border-right: 14px solid #FFFFFF;position: absolute;top: 41px;left: -14px;}</style></head><body><div class="tri_top"></div>         <!--三角形在上边--><div class="tri_right"></div>       <!--三角形在右边--><div class="tri_bottom"></div>      <!--三角形在底边--><div class="tri_left"></div>        <!--三角形在左边--></body>
</html>

效果图：

总结出了一个道理： 三角形往哪个方向，那个方向无需设置border，而相反方向设置border颜色，相邻两边的border设为透明。这样就可实现各个方向的三角形。实心三角形利用CSS中的伪元素· ：before实现，再利用border的transparent属性即可达到效果。而空心三角形是在空心三角形的基础上再加上伪元素：after实现。伪元素：before实现的是一个实心的三角形，伪元素：after实现的是空心的三角形，进而把实心的三角形覆盖，利用绝对定位的top与left的差值绝对了三角形线的粗细而达到如图的效果。

【CSS】利用CSS伪类选择器实现三角形相关推荐

【第四篇】CSS选择器之伪类选择器
利用组合选择器虽然可以选择子类和兄弟元素,但是无法做到特殊的选择.例如无法选择第几个子类,或者和其同标签的兄弟元素.为此CSS诞生了伪类选择器,用来进行更加灵活的元素选择. 伪类选择器伪类选择器根据 ...
CSS :before :after 伪类选择器
CSS :before :after 伪类选择器所有主流浏览器都支持 :after 选择器. 注释:对于 IE8 及更早版本中的 :after,必须声明 <!DOCTYPE>. :bef ...
前端 CSS：锚伪类选择器:hover,:active，:visited；等用法总结
前端 CSS:锚伪类选择器:hover,:active,:visited;等用法总结锚伪类选择器:hover,:active,:visited;等用法总结一.什么是锚伪类在支持 CSS 的浏览器 ...
CSS定位+装饰+伪类选择器拓展
文章目录 CSS定位定位能解决的解决问题: 定位的使用静态定位相对定位绝对定位绝对定位特点子绝父相子绝父相vs子绝父绝子绝父相案例子绝父相水平居中案例子绝父相水平垂直都居中案例导 ...
HTML与CSS基础之伪类选择器(三)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>伪类选 ...
CSS UI状态伪类选择器
UI状态伪类选择器,用于选择处于某种状态下的UI元素,主要用于HTML表单上,根据表单元素的不同状态,定义不同的样式,来增强用户体验. 表单元素的状态包括获得焦点.失去焦点.选中.未选中.可用.不可用 ...
【CSS 教程系列第 12 篇】什么是 CSS 中的伪类选择器
这是[CSS 教程系列第 12 篇],如果觉得有用的话,欢迎关注专栏. CSS 的选择器有很多,常用的有元素选择器.id 选择器.class 选择器.后代选择器.子代选择器.并集选择器.交集选择器. ...
css布局，伪类选择器练习
css伪类选择器练习为了熟练掌握css各种选择器,还是需要多加练习完成以下布局: 要求:掌握好类名的使用,伪类选择器使用正确,并活用以学习的标签及标签特性. 分析:此次练习中出现大量的a标签(均需 ...
css中的伪类选择器有哪些
1 伪类选择器 ① 动态伪类选择器(5个) :link 选择地址没有被访问过的超链接元素 :visited 选择地址被访问过的超链接元素 :hover 选择鼠标悬停在上面的元素. :active 选择 ...

【CSS】利用CSS伪类选择器实现三角形

项目中案例：

详细讲解

【CSS】利用CSS伪类选择器实现三角形相关推荐

最新文章

热门文章