问答详情
源自：4-3 menu

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

.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 17:48

个回答

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

    1
  • 慕桂英8464744
    2016-06-26 17:59:14

    给.index-menu .menu-tips这个元素的尾部添加了一个三角的元素了呢

    0