利用css3写出的倒三角形

<p>&lt;!DOCTYPE html&gt;</p><p>&lt;html&gt;</p><p>&lt;head&gt;</p><p>&lt;meta charset=&quot;gb2312&quot; /&gt;</p><p>&lt;title&gt;无标题文档&lt;/title&gt;</p><p>&lt;style&gt;</p><p>.triangle-left {</p><p>width:0;</p><p>height:0;</p><p>border-right:20px solid #333;</p><p>border-top:20px solid transparent;</p><p>border-bottom:20px solid transparent;</p><p>}</p><p><br/></p><p>.triangle-up {</p><p>width:0;</p><p>height:0;</p><p>border-bottom:20px solid #333;</p><p>border-left:20px solid transparent;</p><p>border-right:20px solid transparent;</p><p>}</p><p>.triangle-right {</p><p>width:0;</p><p>height:0;</p><p>border-left:20px solid #333;</p><p>border-top:20px solid transparent;</p><p>border-bottom:20px solid transparent;</p><p>}</p><p>.triangle-down {</p><p>width:0;</p><p>height:0;</p><p>border-top:20px solid #333;</p><p>border-left:20px solid transparent;</p><p>border-right:20px solid transparent;</p><p>}</p><p>&lt;/style&gt;</p><p>&lt;/head&gt;</p><p><br/></p><p>&lt;body&gt;</p><p>&lt;div class=&quot;triangle-left&quot;&gt;&lt;/div&gt;</p><p>&lt;div class=&quot;triangle-up&quot;&gt;&lt;/div&gt;</p><p>&lt;div class=&quot;triangle-right&quot;&gt;&lt;/div&gt;</p><p>&lt;div class=&quot;triangle-down&quot;&gt;&lt;/div&gt;</p><p>&lt;/body&gt;</p><p>&lt;/html&gt;</p><p><br/></p>