伪元素 谁能讲讲这段代码啊？
来源：4-3 menu
qq_华音流韶_0
2016-06-26 17:48
.index-menu .menu-tips:after{
position: absolute;
content: '';
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 78px solid transparent;
border-right: 78px solid transparent;
border-bottom:10px solid #fff;
}
写回答
关注
2回答
-
- ICHAYA
- 2016-07-05 11:44:06
.index-menu .menu-tips:after{ position: absolute; content: ''; left: 0;/*伪元素相对于.index-menu .menu-tips左边偏移0px*/ bottom: 0;/*伪元素相对.index-menu .menu-tips底侧偏移0px，也可写作top: 62px;*/ width: 0; height: 0;/*伪元素高宽为0*/ border-left: 78px solid transparent;/*border-left宽度为一半，且颜色透明*/ border-right: 78px solid transparent; border-bottom:10px solid #fff; }用border画三角形请参考如下，其实非常容易理解
http://www.zhangxinxu.com/wordpress/2010/05/css-border%E4%B8%89%E8%A7%92%E3%80%81%E5%9C%86%E8%A7%92%E5%9B%BE%E5%BD%A2%E7%94%9F%E6%88%90%E6%8A%80%E6%9C%AF%E7%AE%80%E4%BB%8B/
demo参考
http://www.ziven27.com/cssAngle/
-
- 慕桂英8464744
- 2016-06-26 17:59:14
给.index-menu .menu-tips这个元素的尾部添加了一个三角的元素了呢
从 psd 到 html
教你把PSD设计稿转化成HTML，用案例来讲解基本流程
105471 学习 · 410 问题
相似问题