lid yellowgreen;
border-left: 100px solid transparent;
transform: rotate(35deg) scale(.6);
}
.star:before {
content: '';
position: absolute;
border-bottom: 80px solid yellowgreen;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
top: -45px;
left: -65px;
transform: rotate(-35deg);
}
.star:after {
content: '';
position: absolute;
top: 3px;
left: -105px;
border-right: 100px solid transparent;
border-bottom: 70px solid yellowgreen;
border-left: 100px solid transparent;
transform: rotate(-70deg);
}
六角星
六角星呢？想象一下，一个向上的三角形 ▲，叠加上一个向下的三角形 ▼，就可以得到一个六边形：
.sixstar {
position: relative;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid yellowgreen;
}
.sixstar:after {
content: "";
position: absolute;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid yellowgreen;
top: 30px;
left: -50px;
}
八角星
八角星呢？八个角那么多呢。其实使用两个矩形进行旋转拼接就可以了。
.eightstar {
position: relative;
width: 100px;
height: 100px;
background-color: yellowgreen;
transform: rotate(30deg);
}
.eightstar::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
transform: rotate(45deg);
background-color: yellowgreen;
}
十二角星
好。最后多角星再来一个十二级角星。在八角星的基础上，再增加一个矩形，就能得到十二角啦。也就是要过第一个伪元素。
.twelvestar {
position: relative;
width: 100px;
height: 100px;
margin-bottom: 100px!important;
background-color: yellowgreen;
transform: rotate(30deg);
}
.twelvestar::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
transform: rotate(30deg);
background-color: yellowgreen;
}
.twelvestar::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
transform: rotate(60deg);
background-color: yellowgreen;
}
椭圆
最后，再来使用传统的方法画一个椭圆，过去 CSS3 画椭圆，基本上只能借助 border 实现。
这里使用 border 画一个蛋的形状：
.ellipse {
width: 120px;
height: 160px;
background-color: yellowgreen;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
CodePen -- CSS Shapes(CSS 几何图形)
<iframe title="CSS shapes" src="https://codepen.io/Chokcoco/embed/NgxNrq/?height=265&theme-id=0&default-tab=css,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">
上面所讲述的是使用传统 CSS3 的方式绘制几何图形，前人栽树后人乘凉，之前的大牛们在 CSS 绘制几何图形上已经做了非常深入的研究，更多的 CSS 图形你可以戳这里：The Shapes of CSS 。接下来我们将要了解一些更高级的绘制几何图形的方法。
如果你看到了这里，恭喜你，本文的正文从这里开始。
clip-path
CSS 新属性 clip-path，意味裁剪路径的意思，让我们可以很便捷的生成各种几何图形。
clip-path 通过定义特殊的路径，实现我们想要的图形。而这个路径，正是 SVG 中的 path 。
看看它的 API：
{
/* Keyword values */
clip-path: none;
/* Image values */
clip-path: url(resources.svg#c1);
/* Box values
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
clip-path: margin-box
clip-path: border-box
clip-path: padding-box
clip-path: content-box
/* Geometry values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
/* Box and geometry values combined */
clip-path: padding-box circle(50px at 0 100px);