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

参考链接

• Chris Coyier, The Shapes of CSS
• CSS制作图形速查表