css实现一个三角形

css实现一个三角形

HTML代码

<div class="div">
	这是一个三角形
</div>

做法：通过设置border来实现。
如下所示，将div的box-sizing设为IE盒模型后，设置border的属性，效果如下图，可以看出是由四个三角形组成，所以我们将其中任意三个border的颜色设为透明后，剩下的就是三角形。

.div{
	box-sizing:border-box;
	width:40px;
	height:40px;
	background:red;
	border-width:40px;
	border-style:solid;
	border-color:red green black yellow;
}

代码如下：

	box-sizing:border-box;
	width:40px;
	height:40px;
	background:red;
	border-width:40px;
	border-style:solid;
	border-color:transparent transparent transparent yellow;

效果如下图，如果想要各种角度的三角形，可以再结合transform的rotate属性，进行旋转得到。