纯 CSS 绘制三角形（各种角度）
我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。
今天这篇文章开始推出《百变 CSS 系列》，给大家带来 CSS 在网页中以及图形绘制中的使用。首先给大家打来的是流行的 CSS 三角形绘制方法。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/> <title>Document</title> <style> #all{width:980px; margin:0 auto;} .a{float:left; width:200px; height:200px; margin:20px;} #triangle-up{width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:100px solid red;} #triangle-down{width:0; height:0;border-left:50px solid transparent; border-right:50px solid transparent; border-top:100px solid red;} #triangle-left{ width:0; height:0; border-top:50px solid transparent; border-right:100px solid red; border-bottom:50px solid transparent;} #triangle-right{width:0; height:0;border-top:50px solid transparent; border-left:100px solid red; border-bottom:50px solid transparent;} #triangle-topleft{width:0; height:0; border-top:100px solid red; border-right:100px solid transparent;} #triangle-topright{width:0; height:0; border-top:100px solid red; border-left:100px solid transparent;} #triangle-bottomleft{width:0; height:0;border-bottom:100px solid red; border-right:100px solid transparent;} #triangle-bottomright{width:0;height:0;border-bottom:100px solid red; border-left:100px solid transparent;} </style> </head> <body> <div id="all"> <div class="a"><div id="triangle-up"></div><h2>正三角</h2></div> <div class="a"><div id="triangle-down"></div><h2>倒三角</h2></div> <div class="a"><div id="triangle-left"></div><h2>左方向三角</h2></div> <div class="a"><div id="triangle-right"></div><h2>右方向三角</h2></div> <div class="a"><div id="triangle-topleft"></div><h2>左上方三角</h2></div> <div class="a"><div id="triangle-topright"></div><h2>右上方三角</h2></div> <div class="a"><div id="triangle-bottomleft"></div><h2>左下方三角</h2></div> <div class="a"><div id="triangle-bottomright"></div><h2>右下方三角</h2></div> </div> </body> </html>
