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;

}