CSS3绘制各种形状

本文为叩丁狼高级讲师原创文章，转载请注明出处。

现在的CSS功能非常强大了，特别是CSS3的属性，例如转换属性，过渡属性，动画属性，能做的效果非常多。在网页开发中，会经常遇到一些小符号或者形状，在以前就只能通过切图来实现，切图这种方式是用起来方便，但是会增加请求。而现在浏览器对CSS3的兼容基本没有什么问题，所以在网页开发的时候遇到符号或者形状，能写的都是用CSS来书写了。
而这篇文章就是收集了各种通过CSS书写的形状，在开发的时候可以快速应用。例如：椭圆，三角形，梯形，多边形，五角星，多角星，等等…

文章中涉及到的重要属性有：border，transform，gradient，伪元素，border-radius等，这些都是比较常用的属性，但是通过不同的组合，可以构建出不同的形状。

为了便于理解实现原理，不同的组合采用了两个或多个颜色进行区分。

##椭圆

画圆，都是通过border-radius来绘制，椭圆也不例外。

.ellipse {
	width: 140px;
	height: 180px;
	background: orange;
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

<div class="ellipse"></div>

##三角形

三角形非常常见，绘制也不难，通过border就可以实现了。底边控制三角形的高度，左边和右边控制三角形的宽度。

.traingle {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid orange;
}

<div class="traingle"></div>

##梯形

梯形有两种绘制思路，一种是利用透视的近大远小来绘制得到；一种是利用三角形组合而来。

.trapezoid{
    position: relative;
    width: 60px;
    padding: 60px;
}
 
.trapezoid::before{
    content:"";
    perspective: 20px;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: scaleY(1