CSS3 制作常见几何图形
#CSS#CSS 特效 2017-09-16

通过 CSS3 提供一些新的属性和标准，可以实现一些常见的几何图形。避免使用贴图等其他手段，减少网络请求和资源大小，同时自适应和缩放效果会更好。

CSS 的边框

因为 HTML 的元素一般是占据矩形空间，或者由矩形拼接的空间（如由于内容过长而换行的行内元素）。所以除了矩形之外的几何图形实现一般要借助 border 属性来完成。现在来了解一下 CSS 的 border 属性。

border 相关的属性只有 border-width border-style border-color 和 border-radius 等，同时可以在 border 后添加 top bottom left 或 right 来指定单边边框。如，border-top-width: 10px，仅指定上边框的宽度为 10 px。

border-style 可选的值有 dotted dashed solid double groove ridge inset outset none，可以通过下面的例子大概区分一下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
    .child {
      display: inline-block;
      width: 200px;
      height: 200px;
      border-width: 10px;
      border-color: #e3e3e3;
    }
    .border1 {
      border-style: solid double dotted dashed;
      margin-right: 20px;
    }
    .border2 {
      border-style: groove ridge inset outset;
    }
</style>
<div id='border1'></div>
<div id='border2'></div>

border-width 和 border-color 属性很简单，指定宽度和颜色。颜色可以使用所有 CSS3 的颜色格式，可以通过指定 transparent 使边框透明，在利用边框绘制多边形时，经常会用到透明边框。

border-radius 是 CSS3 的新属性，为边框指定圆角的半径。可以通过 broder-top-left-radius: 2px 的格式指定特定的角。在使用 CSS3 绘制圆形或椭圆形相关的图形时经常用到。

1
2
3
4
5
6
7
8
9
<style>
    div {
        background: #0aaaa0;
        border-radius: 50%;  /*等价于 border-radius: 150px / 100px; */
        width: 300px;
        height: 200px;
    }
</style>
<div></div>

椭圆形

上例中已经给出了绘制椭圆形的例子，只需给一个长方形的 border-radius 的值设为 50% 即可绘制椭圆形，而给一个正方形的 border-radius 设置为 50% 时，即为圆形。效果等同于使用 / 设置边角的横向和纵向的半径分别为宽和长的一半。

绘制半个椭圆：

1
2
3
4
5
6
7
8
9
10
<style>
    div {
       background: #0aaaa0;
       border-top-left-radius: 100px 150px;
       border-top-right-radius: 100px 150px;
       width: 200px;
       height: 150px;
    }
</style>
<div></div>

三角形

我们可以为一个矩形设置不同的边框颜色来查看边框的表现形式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
    .item {
      display: inline-block;
      width: 100px;
      height: 100px;
      border-style: solid;
      border-width: 40px;
      border-color: #f6666f #0aaaa0 yellow #aa00ff;
    }
    .two {
      margin-left: 50px;
      border-right: none;
    }
</style>
<div class="item"></div>
<div class="item two"></div>

可以看出边框的交接处是斜边，另外当有一边无边框的时候，会呈现右图的样式。可以利用这一点实现一个三角形。

1
2
3
4
5
6
7
8
9
10
11
12
<style>
    div {
       width: 0;
       height: 0;
       border-style: solid;
       border-width: 80px 100px;
       border-color: transparent;
       border-left-color: #0aaaa0;
       border-right: none;
    }
</style>
<div></div>

组合图形

可以结合伪类选择器 before 和 after 以及 transform 变化实现一些组合图形的绘制。比如，绘制叉号：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
div {
    height: 100px;
    width: 100px;
    position: relative;
}
div::before, div::after{
    background: #0aaaa0;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    transform: translateX(-50%);
    content: '';
    width: 100px;
    height: 15px;
}
div::before {
    transform: rotate(-45deg);
}
div::after {
    transform: rotate(-135deg);
}
</style>
<div></div>