CSS 魔法系列：纯 CSS 绘制三角形，各种角度

#triangle-up {

width:0;

height:0;

border-left:50pxsolidtransparent;

border-right:50pxsolidtransparent;

border-bottom:100pxsolidred;

}

#triangle-down {

width:0;

height:0;

border-left:50pxsolidtransparent;

border-right:50pxsolidtransparent;

border-top:100pxsolidred;

}

#triangle-left{

width:0;

height:0;

border-top:50pxsolidtransparent;

border-right:100pxsolidred;

border-bottom:50pxsolidtransparent;

}

#triangle-right{

width:0;

height:0;

border-top:50pxsolidtransparent;

border-left:100pxsolidred;

border-bottom:50pxsolidtransparent;

}

#triangle-topleft {

width:0;

height:0;

border-top:100pxsolidred;

border-right:100pxsolidtransparent;

}

#triangle-topright {

width:0;

height:0;

border-top:100pxsolidred;

border-left:100pxsolidtransparent;

}

#triangle-bottomleft {

width:0;

height:0;

border-bottom:100pxsolidred;

border-right:100pxsolidtransparent;

}

#triangle-bottomright {

width:0;

height:0;

border-bottom:100pxsolidred;

border-left:100pxsolidtransparent;

}