                        課程
                    
                        /前端開發(fā)
                        
                            /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

關(guān)注問題我要回答

1048

操作

收起

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底側(cè)偏移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/