纯CSS制作图形效果

使用CSS可以制作三角形、圆形、半圆形、平行四边形、扇形以及一些复杂的图形效果。先来看看三角形、圆形、半圆形、扇形这些简单的图形实现。

一、三角形、梯形、圆形、半圆形、扇形的实现

关于三角形

通过使用border制作三角形来看，利用border将一个div元素分为四部分；只需要保证border上下左右一边的边框是有色，其余三边为透明色即可制作出三角形；而当改变border上下左右的值时，所制作的三角形会有不同的角度。

来看一下：

.test {    width: 0;    height: 0;    border-color: red green blue pink;    border-style: solid;    border-width: 20px;
}

这是使用border的四个边框都置为有色，并且宽度大小相同制作出的四个直角三角形。改变四个边框的大小，可以看到四个角度不同的三角形；

.test {    width: 0;    height: 0;    border-color: red green blue pink;    border-style: solid;    border-width: 20px 25px 10px 50px;
}

1. 正三角

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

1. 正梯形

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

思路： 在正三角的基础上给元素加个宽度。

1. 正直角

.test {
    width: 0px;
    height: 0px;
    border-bottom: 100px solid pink;
    // 不是 border-right: 100px solid pink;  这样的话元素会没有高度
    border-left: 100px solid transparent;
 }

关于矩形

平行四边形

.test {    width: 100px;    height: 100px;    transform: skew(-20deg);    background-color: pink;
}

思路： 对正方形利用skew在x轴上倾斜变换即可得到一个平行四边形；但是这时候容器内部的文字也是倾斜的，可以在内部加一层容器，进行逆向倾斜。

  .test {    width: 100px;    height: 100px;    transform: skew(-20deg);    background-color: pink;
  }  .test div {    transform: skew(20deg);
  }

关于圆形

一个 div 的宽高相等，并且利用 CSS3 中的border-radius属性，其值设为（大于或等于）宽度或高度的一半（或者直接设置为 50% ），即为圆。

原理：宽高相等、四个角都是圆角：四个角的取值为50%。

这里当border-radius属性值指定为大于边长的一半，同样可以生成一个圆的原因是：

当任何两个相邻边框半径之和超过了边框盒的尺寸，客户端必须按比例减小所有边框半径的值，直到它们相互之间没有重叠。

① 圆角的内径和外径

我们设置的border-radius的值是指外半径，内半径=外半径减去border宽度。因此，当border-radius的值小于或等于 border 的宽度时，边框内部将不具有圆角效果。

.test {    width: 100px;   height: 100px;   border: 30px solid black;   border-radius: 30px;
}

② 关于border-radius属性值

border-radius属性值

上图圆角代码为：border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px;

border-radius属性是来设置一个 div 的四个圆角的形状的，每一个圆角需要2个值，这两个值是用来定义圆角形状的 X / Y 轴上的半径。顺序遵守 TRBL（Top-Right-Bottom-Left） 原则，/斜杠前是水平方向（ X 轴）圆角半径，斜杠后是垂直方向（ Y 轴）圆角半径。

如果没有/斜杠，表示圆角的水平和垂直半径的值相等（注意这里是值相等，而不是相等：如果设的是px值，那水平和垂直半径是相等的。但如果设的是百分比值，那说明水平垂直半径有相同缩放比例，但不代表缩放后两个半径的px值相等。）例如：

border-radius的百分比值是相对于元素的宽高计算的，也就是说元素为宽高为 100px 和 200px时，border-radius：50％;相当于border-radius：50px / 100px; (双方50％)：

.test {
  width: 100px;
  height: 200px;
  background: pink;
  //border: 30px solid black;
  border-radius: 50%;
}

1. 椭圆形

.test {
    width: 200px;
    height: 100px;
    background-color: pink;
    border-radius: 50%;
    // border-radius: 100px / 50px;
}

1. 半圆

.test {
    width: 100px;
    height: 50px;
    border-radius: 50% /100% 100% 0 0;    // border-radius: 50px 50px 0 0;
    // border-radius: 100px 100px 0 0; ??????????
    background-color: pink;
}

思路：左上角、右上角的值为宽度的一半or等于高度值大小（左上角、右上角的值为宽度值大小），右下角、左下角的值不变（等于0）；并且，一边边长要是另一边边长的一半大小。

这里用百分比值比较方便，并且很容易明白：左上角和右上角的半径应该都是该形状宽度的100%，并且水平方向的左右半径应该是50%，因此，垂直方向的border-radius的值应该是100% 100% 0 0。用此百分比值方法可以画出半椭圆，只需要改变元素宽度值不同即可。

1. 半椭圆

.test {    width: 100px;    height: 250px;    border-radius: 50% /100% 100% 0 0;    background-color: pink;
}

1. 四分之一圆

.test {    width: 100px;    height: 100px;    border-radius: 100% 0 0 0;    background-color: pink;
}

思路：元素宽高一致，只需要其中一个圆角水平和垂直方向占据100%半径，而其它四个则没有圆角（为0）即可。

二、复杂图形

1. 核辐射警告标志

<div id="warning">
  <div class="bg"></div>
  <div class="bg"></div>
  <div class="bg"></div>
</div>

  #warning {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
  }  #warning .bg {
    position: absolute;
    top: -74px;
    border-top: 174px solid yellow;
    border-bottom: 174px solid black;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
  }  #warning .bg:nth-child(1) {
    transform: rotate(0deg);
  }  #warning .bg:nth-child(2) {
    transform: rotate(120deg);
  }  #warning .bg:nth-child(3) {
    transform: rotate(-120deg);
  }

思路：使用border构造相间的三角形，然后使用overflow-hidden和border-radius剪裁成圆。

首先利用border-top和border-bottom构造上下两个角度为60°三角形: 三角形的底边长为容器的宽度值利用三角函数算出三角形的高约为174px; 为了让上下两个三角形正好对称防止与圆形正中间，使两个三角形整体向上移动74px，使每个三角形垂直方向占据圆形容器直径的一半100px; 最后将其旋转即可。

1. .........有待更新

References

CSS-TRICKS
CSS3 border-radius介绍
CSS秘密花园：灵活的椭圆形

作者：黎贝卡beka
链接：https://www.jianshu.com/p/f40617d863a3