css 实现三角形

三角形可用CSS的border实现。

width:0;
height:0;
border-right:10px solid red;
border-top:10px solid transparent;//设置透明
border-bottom:10px solid transparent;

三角形 顶点在哪边 就 不设置哪边的border值 ，三角形向左或向右，则设置border的顶部和底部为相同像素的透明色。三角形的高则为像素的点素，即px值。

另外CSS选择器中，after和before表示在前后插入内容。

eg:请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：
<div id=”demo”></div>

 

#demo{

    width:100px;

    height:100px;

    border: 2px solid #000;

   position:relative;

}

#demo:after,#demo:before{

　　width:0px;

　　height:0px;

　　position:absolute;

　　left:100%:　

}

#demo:after{

　　border-top:10px solid transparent;

　　border-bottom:10px solid transparent;

　　border-left:10px solid #fff;

　　top:20px;

}

 

#demo:before{

　　border-top:12px solid transparent;

　　border-bottom: 12px solid transparent;

　　border-left:12px solid #000;

　　top:18px;

}