CSS3 制作常见几何图形

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

CSS 的边框

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

  border 相关的属性只有 border-width border-style border-colorborder-radius 等,同时可以在 border 后添加 top bottom leftright 来指定单边边框。如,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-widthborder-color 属性很简单,指定宽度和颜色。颜色可以使用所有 CSS3 的颜色格式,可以通过指定 transparent 使边框透明,在利用边框绘制多边形时,经常会用到透明边框。

  border-radiusCSS3 的新属性,为边框指定圆角的半径。可以通过 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>

组合图形

  可以结合伪类选择器 beforeafter 以及 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>

See the Pen oaOZVK by Hozen (@Hozen) on CodePen.