CSS圖形每日一練（上）

前言

本文將持續(xù)更新CSS圖形練習(xí)，同步上傳 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）

實現(xiàn)原理：把高度 height 設(shè)置為寬度 width 的一半，并且左上角和右上角的圓角半徑與元素的高度一致，而右下角和左下角的圓角半徑設(shè)置為 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時發(fā)現(xiàn)，盒模型將 border 的寬度加上了，無法顯示應(yīng)有的圖形效果。隨后加上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

參考鏈接

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 18- UIBezierPath官方API中文翻譯(待校對) ----------------- 華麗的分割線 -...
    醉臥欄桿聽雨聲閱讀 1,162評論 1贊 1
  • 本文旨在介紹制作一些常用的圖標(biāo)圖形，拓展大家對CSS的認(rèn)知，不要僅限于在定位子等簡單功能上，覺得css簡單的人，大...
    果汁涼茶丶閱讀 1,668評論 0贊 2
  • 感覺今天過的特別快，都不知道一天是怎么過來的，東忙哈西南哈的，都沒有看到我的小姐姐飯館體驗，經(jīng)微信上了解到有個小姐...
    伽麗閱讀 237評論 0贊 0
  • 沒有人將我喚醒 我從稀疏的夢里爬起 仿佛有月光 曾落在枕上 書寫一段如花般的過往 多少年 我已記不清 多少月 我也...
    小桃不是桃子閱讀 204評論 0贊 1
  • 今天星期三，天氣情。今天寶爸接嘉旭回家，一回家寶貝就說餓了，我說你中午在小飯桌沒吃飽嗎，他說吃飽了...
    嘉旭媽媽閱讀 128評論 0贊 0

友情鏈接更多精彩內(nèi)容