CSS图形每日一练（上）

前言

本文将持续更新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制作图形速查表