利用css画三角

1、新建一个元素，随便什么元素，不过我习惯性的会用块元素来做。如果行内元素就display:block它。

 

<div class="triangle"></div>

 

2、把它的宽高设置为height:0px; width:0px;

 

3、设置边框border属性，用来实现三角形。

 

首先要了解border具体是怎么样的，我写了一个这样的样式：

 

border:50px solid #000; border-color:#f00 #000 #f0f #00f;

 

在FF下面显示效果如下：

 

出现4个三角形合并成一个正方形。到这里就很清晰了，只要把想要的保留，其它的设置为透明就可以达到三角形的效果，那么：

 

border:50px solid #000; border-color:#f00 transparent transparent transparent;

 

在FF就可以看到一个红色三角形如下：