纯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;
}
- 正三角
.test {
width: 0;
height: 0;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 100px solid pink;
}
- 正梯形
.test {
width: 100px;
height: 0;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 100px solid pink;
}
思路： 在正三角的基础上给元素加个宽度。
- 正直角
.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%;
}
- 椭圆形
.test {
width: 200px;
height: 100px;
background-color: pink;
border-radius: 50%;
// border-radius: 100px / 50px;
}
- 半圆
.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。用此百分比值方法可以画出半椭圆，只需要改变元素宽度值不同即可。
- 半椭圆
.test {
width: 100px;
height: 250px;
border-radius: 50% /100% 100% 0 0;
background-color: pink;
}
- 四分之一圆
.test {
width: 100px;
height: 100px;
border-radius: 100% 0 0 0;
background-color: pink;
}
思路：元素宽高一致，只需要其中一个圆角水平和垂直方向占据100%半径，而其它四个则没有圆角（为0）即可。
二、复杂图形
- 核辐射警告标志
<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; 最后将其旋转即可。
- .........有待更新
