.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 几何图形)

上面所讲述的是使用传统 CSS3 的方式绘制几何图形，更多的 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); /* Global values */ clip-path: inherit; clip-path: initial; clip-path: unset; }

看上去很多，其实很好理解，如果接触过 SVG 的 path，其实就是照搬 SVG 的 path 的一些定义。换言之，如果没有接触过 SVG，看完本文后再去学习 SVG 路径 ，也会十分容易上手。

根据不同的语法，我们可以生成不同的图形。

例如 clip-path: circle(50px at 50px 50px) 表示在元素的 （50px, 50px）处，裁剪生成一个半径为 50px 的圆。

以元素的左上角为坐标起点

而整个 clip-path 属性，最为重要的当属 polygon，可以利用 polygon 生成任意多边形。

  clip-path 示例

下面分别列举使用 clip-path 生成一个圆形和一个十边形。

/* 圆形 */ .circle { width: 100px; height: 100px; background-color: yellowgreen; clip-path: circle(50px at 50px 50px); } /* 十边形 */ .polygon { width: 100px; height: 100px; background-color: yellowgreen; clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%); }

clip-path: circle(50px at 50px 50px) 上文也讲了，表示在元素的 （50px, 50px）处，裁剪生成一个半径为 50px 的圆。