如何去构建种类繁多的CSS Shapes

前言

实际项目中，UI会设计各种各样的样式(欲哭无泪)，如果你只会画个矩形，恐怖难以满足UI的需求，当然CSS的发展也为我们提供了可能，在CSS3之前，我们确实只能实现四四方方的矩形。CSS3出现了许多属性：border,border-radius,transform,gradient等，有了以上技术，我们就可以实现丰富的CSS图形了。

常见几何图形

1. 圆形:利用 border-radius 可简单实现，如下：

div{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

浏览器样式如图：

2. 三角形：利用 border 属性，代码如下：

div{
  width: 0;
  height: 0;
  border-color: transparent transparent transparent pink;
  border-width: 20px;
  border-style: solid;
}

浏览器样式如图：

三角形的朝向和高宽可通过border-color的透明属性值位置和border-width的大小来控制。

3. 梯形：也可以利用border属性，具体和三角形的区别，可打开调试器查看样式区别。代码如下：

div{
  width: 40px;
  border-color: transparent transparent pink transparent;
  border-width: 20px;
  border-style: solid;     
}

浏览器样式如图：

4.五边形：其实就是一个梯形和一个三角形的合并，可以借助伪元素

div{
  position: relative;
  width: 40px;
  border-color: pink transparent transparent  transparent;
  border-width: 40px;
  border-style: solid;     
}
div::before{
  content: '';
  position: absolute;
  top: -120px;
  left: -40px;
  width: 0;
  height: 0;
  border-color: transparent transparent pink transparent;
  border-width: 40px 60px;
  border-style: solid;
} 

浏览器样式如下：

5. 六边形：两个相贴合的梯形（形状大小相同)

div{
  width: 40px;
  border-color: transparent transparent pink transparent;
  border-width: 40px;
  border-style: solid;     
}
div:before{
  content: '';
  position: absolute;
  width: 40px;
  height: 0px;
  top: 40px;
  left: -40px;
  border-color: pink transparent transparent  transparent;
  border-width: 40px;
  border-style: solid;     
}

浏览器样式如图： 其实掌握了上面基础的图形，复杂图形就可以随意组装了。多边形就可以以此类推了，接下来来看看X角星

6. 五角星，想象下3个三角形旋转重叠形成的，代码如下：

div {
   margin: 50px 0;
   position: relative;
   width: 0;
   border-right: 100px solid transparent;
   border-bottom: 70px  solid pink;
   border-left: 100px solid transparent;
   transform: rotate(35deg) scale(.6);
}
div:before {
    content: '';
    position: absolute;
    border-bottom: 80px solid pink;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    top: -45px;
    left: -65px;
    transform: rotate(-35deg);
}
div:after {
    content: '';
    position: absolute;
    top: 3px;
    left: -105px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid pink;
    border-left: 100px solid transparent;
    transform: rotate(-70deg);
}

生成的五角星如图：

7.八角星：可以利用两矩形合成，如下：

div{
  width: 40px;
  height: 40px;
  background-color: pink;
}
div::after{
  content: '';
  position: absolute;
  background-color: pink;
  width: 40px;
  height: 40px;
  transform: rotate(45deg);
}

生成的八角星如下：

8.椭圆：利用border属性也可以生成

div {
   width: 120px;
   height: 160px;
   background-color: pink;
   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

椭圆图如下：

虽然大部分图形都可以绘制了，但其实过程还是比较艰难的，css也推出了新属性 clip-path 可以通过特殊的路径来生成我们想要的图形，这个我也只是有所耳闻，过段时间补一补这方面的知识！大家可以看看一个由clip-path和动画组合的例子 ！