                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /从 psd 到 html

伪元素谁能讲讲这段代码啊？

.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;

}

qq_华音流韶_0

2016-06-26

源自：从 psd 到 html 4-3

关注问题我要回答

1015

操作

收起

2 回答

ICHAYA 回答被采纳 +3 积分
2016-07-05

.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/