前言
本文将持续更新CSS图形练习，同步上传 GitHub 。
1. 正方形（Square）
#square {
width: 100px;
height: 100px;
background: red;
}
Square.png
2. 矩形（Rectangle）
#rectangle {
width: 200px;
height: 100px;
background: red;
}
Rectangle.png
3. 圆形（Circle）
#circle {
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
}
Circle.png
4. 椭圆形（Oval）
#oval {
width: 200px;
height: 100px;
background: red;
border-radius: 100px / 50px;
}
Oval.png
5. 上三角形（Triangle Up）
#triangle-up {
width: 0px;
height: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
triangle-up.png
6. 下三角形（Triangle Down）
#triagnle-down {
width: 0px;
height: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
triangle-down.png
7. 左三角形（Triangle Left）
#triangle-left {
width: 0px;
height: 0px;
border-right: 100px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
triangle-left.png
8. 右三角形（Triangle Right）
#triangle-right {
width: 0px;
height: 0px;
border-left: 100px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
triangle-right.png
9. 左上三角（Triangle Top Left）
#triangle-topleft {
width: 0px;
height: 0px;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
triangle-topleft.png
10. 右上三角（Triangle Top Right）
#triangle-topright {
width: 0px;
height: 0px;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
triangle-topright.png
11. 左下三角（Triangle Bottom Left）
#triangle-bottomleft {
width: 0px;
height: 0px;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
triangle-bottomleft.png
12. 右下三角（Triangle Bottom Right）
#triangle-bottomright {
width: 0px;
height: 0px;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
triangle-bottomright.png
13. 上半圆（Semicircle Top）
实现原理：把高度 height 设置为宽度 width 的一半，并且左上角和右上角的圆角半径与元素的高度一致，而右下角和左下角的圆角半径设置为 0。
#semicircle-top {
width: 100px;
height: 50px;
background: red;
border-radius: 100px 100px 0 0;
/* 左上、右上、右下、左下 */
}
semicircle-top.png
14. 下半圆（Semicircle Bottom）
#semicircle-bottom {
width: 100px;
height: 50px;
background: red;
border-radius: 0 0 100px 100px;
/* 左上、右上、右下、左下 */
}
semicircle-bottom.png
15. 左半圆（Semicircle Left）
#semicircle-left {
width: 50px;
height: 100px;
background: red;
border-radius: 50px 0 0 50px;
/* 左上、右上、右下、左下 */
}
semicircle-left.png
16. 右半圆（Semicircle Right）
#semicircle-right {
width: 50px;
height: 100px;
background: red;
border-radius: 0 50px 50px 0;
/* 左上、右上、右下、左下 */
}
semicircle-right.png
17. 扇形（Sector）
#sector {
width: 100px;
height: 100px;
background: red;
border-radius: 100px 0 0 0;
}
sector.png
18. 梯形（Trapezoid）
#trapezoid {
width: 100px;
height: 0;
border-bottom: 100px solid red;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
trapezoid.png
19. 平行四边形（Parallelogram）
#parallelogram {
width: 150px;
height: 100px;
background: red;
transform: skew(20deg);
}
parallelogram.png
20. 菱形（Diamond Square）
#diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: red;
position: relative;
top: -50px;
}
#diamond::after {
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: red;
position: absolute;
top: 50px;
left: -50px;
content: '';
}
diamond.png
21. Diamond Shield
#diamond-shield {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 20px solid red;
position: relative;
top: -50px;
}
#diamond-shield::after {
position: absolute;
content: '';
left: -50px;
top: 20px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
diamond-shield.png
22. Diamond Narrow
#diamond-narrow {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid red;
position: relative;
top: -50px;
}
#diamond-narrow::after {
position: absolute;
content: '';
top: 70px;
left: -50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
diamond-narrow.png
23. Cut Diamond
#cut-diamond {
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0 25px 25px 25px;
width: 50px;
height: 0;
box-sizing: content-box;
position: relative;
margin: 20px 0 50px 0;
}
#cut-diamond::after {
position: absolute;
content: '';
top: 25px;
left: -25px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
cut-diamond.png
24. 五边形（Pentagon）
#pentagon {
position: relative;
width: 54px;
box-sizing: content-box;
border-width: 50px 18px 0;
border-style: solid;
border-color: red transparent;
}
#pentagon::before {
position: absolute;
content: '';
top: -85px;
left: -18px;
width: 0;
height: 0;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent red;
}
Pentagon.png
25. 六边形（Hexagon）
#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
}
#hexagon::before {
position: absolute;
content: '';
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
#hexagon::after {
position: absolute;
content: '';
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
hexagon.png
26. 八边形（Octagon）
在Jsbin里coding时发现，盒模型将 border 的宽度加上了，无法显示应有的图形效果。随后加上box-sizing: border-box;，就可以正常显示了。
#octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#octagon::before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100px;
height: 0;
border-left: 29px solid white;
border-right: 29px solid white;
border-bottom: 29px solid red;
}
#octagon::after {
position: absolute;
content: '';
bottom: 0;
left: 0;
width: 100px;
height: 0;
border-left: 29px solid white;
border-right: 29px solid white;
border-top: 29px solid red;
}
octagon.png
27. 弯尾箭头（Curved Tail Arrow）
#curvedarrow {
position: relative;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-right: 9px solid red;
}
#curvedarrow::after {
position: absolute;
content: '';
top: -12px;
left: -9px;
width: 12px;
height: 12px;
border: 0px solid transparent;
border-top: 3px solid red;
border-radius: 20px 0 0 0;
transform: rotate(45deg);
}
curvedarrow.png
参考链接
- Chris Coyier, The Shapes of CSS
- CSS制作图形速查表