CSS3绘制三角形

三角形是在网页应用中一种常见的图形，我们用CSS3技术可以很容易的绘制出来。
首页我们先定义好相应的html结构：

<div class="wrap">
	<span class="rank-label"></span>
</div>

接下来，我们开始正式的编写样式：

.wrap {
	width: 200px;
	height: 100px;
	border: 1px solid #000;
	position: relative;
}
.wrap .rank-label {
	position: absolute;
	top: 0;
	right: 0;
	width: 58px;
	height: 58px;
	background: #FFD200;
}
.wrap .rank-label::before {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	width: 0;
	height: 0;
	border-width: 29px;
	border-style: solid;
	border-color: transparent;
	border-left-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
}

最终的效果如下：

我们绘制这个三角形的原理其实是先绘制出一个正方形，然后利用伪元素将左下或者右上边框设为#FFFFFF覆盖住正方形的一半面积，从而绘制出相应的三角形。
利用上述原理，我们也可以很容易绘制出下面的三角形：

代码如下：

.wrap {
	width: 200px;
	height: 100px;
	border: 1px solid #000;
	position: relative;
}
.wrap .rank-label {
	position: absolute;
	top: 0;
	right: 0;
	width: 58px;
	height: 58px;
	background: #FFD200;
}
.wrap .rank-label::before {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	width: 0;
	height: 0;
	border-width: 29px;
	border-style: solid;
	border-color: transparent;
	border-right-color: #ffffff;
	border-top-color: #ffffff;
}