1. 心形（Heart）

#heart {position: relative;width: 100px;height: 90px; } #heart::before, #heart::after {position: absolute;content: '';top: 0;left: 50px;width: 50px;height: 80px;background: red;border-radius: 50px 50px 0 0;transform: rotate(-45deg);transform-origin: 0 100%; } #heart::after {left: 0;transform: rotate(45deg);transform-origin: 100% 100%; } 復制代碼

2. 無窮（Infinity）

#infinity {position: relative;width: 212px;height: 100px;box-sizing: content-box; } #infinity::before, #infinity::after {position: absolute;content: '';box-sizing: content-box;top: 0;left: 0;width: 60px;height: 60px;border: 20px solid red;border-radius: 50px 50px 0 50px;transform: rotate(-45deg); } #infinity::after {left: auto;right: 0;border-radius: 50px 50px 50px 0;transform: rotate(45deg); } 復制代碼

3. 雞蛋形（Egg）

#egg {display: block;width: 126px;height: 180px;background: red;border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; } 復制代碼

4. 吃豆人（Pac-Man）

#pacman {width: 0;height: 0;border: 60px solid red;border-right-color: transparent;border-radius: 60px; } 復制代碼

5. 聊天框（Talk Bubble）

#talkbubble {width: 120px;height: 80px;background: red;border-radius: 10px;position: relative; } #talkbubble::before {position: absolute;content: '';top: 26px;right: 100%;width: 0;height: 0;border-top: 13px solid transparent;border-right: 17px solid red;border-bottom: 13px solid transparent; } 復制代碼

6. 六角星（Star(6-points)）

#star-six {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;position: relative; } #star-six::after {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid red;position: absolute;content: '';top: 30px;left: -50px; } 復制代碼

7. 五角星（Star(5-points)）

#star-five {width: 0;height: 0;border-left: 100px solid transparent;border-right: 100px solid transparent;border-bottom: 70px solid red;position: relative;transform: rotate(35deg);margin: 60px 0; } #star-five::before {width: 0;height: 0;border-left: 30px solid transparent;border-right: 30px solid transparent;border-bottom: 80px solid red;position: absolute;content: '';top: -45px;left: -65px;transform: rotate(-35deg); } #star-five::after {width: 0;height: 0;border-left: 100px solid transparent;border-right: 100px solid transparent;border-bottom: 70px solid red;position: absolute;content: '';top: 3px;left: -105px;transform: rotate(-70deg); } 復制代碼

8. 爆炸形狀1（12 Point Burst）

#burst-12 {width: 80px;height: 80px;background: red;position: relative; } #burst-12::before, #burst-12::after {position: absolute;content: '';top: 0;left: 0;width: 80px;height: 80px;background: red; } #burst-12::before {transform: rotate(30deg); } #burst-12::after {transform: rotate(60deg); } 復制代碼

9. 爆炸形狀2（8 Point Burst）

#burst-8 {width: 80px;height: 80px;background: red;position: relative;transform: rotate(20deg); } #burst-8::before {width: 80px;height: 80px;background: red;position: absolute;content: '';top: 0;left: 0;transform: rotate(135deg); } 復制代碼

10. 陰陽（Yin Yang）

#yin-yang {width: 100px;height: 100px;background: linear-gradient(to bottom, #000 0%,#000 50%,#fff 50%,#fff 100%);border-radius: 50%;border: 1px solid black;position: relative; } #yin-yang::before {position: absolute;content: '';top: 25px;left: 0;width: 10px;height: 10px;background: white;border-radius: 50%;border: 20px solid black;box-sizing: content-box; } #yin-yang::after {position: absolute;content: '';top: 25px;left: 50px;width: 10px;height: 10px;background: black;border: 20px solid white;border-radius: 50%;box-sizing: content-box; } 復制代碼

11. 徽章絲帶（Badge Ribbon）

#badge-ribbon {width: 100px;height: 100px;background: red;border-radius: 50px;position: relative; } #badge-ribbon::before, #badge-ribbon::after {position: absolute;content: '';top: 70px;left: -10px;border-left: 40px solid transparent;border-right: 40px solid transparent;border-bottom: 70px solid red;transform: rotate(-140deg); } #badge-ribbon::after {left: auto;right: -10px;transform: rotate(140deg); } 復制代碼

12. 電視屏幕（TV Screen）

#tv {width: 200px;height: 150px;position: relative;background: red;border-radius: 50% / 11%;margin: 10px; } #tv::before {position: absolute;content: '';top: 10%;bottom: 10%;left: -5%;right: -5%;background: inherit;border-radius: 5% / 50%; } 復制代碼

13. Chevron

#chevron {position: relative;height: 60px;width: 200px;padding: 12px;margin-bottom: 6px;box-sizing: border-box; } #chevron::before {position: absolute;content: '';top: 0;left: 0;height: 100%;width: 51%;background: red;transform: skew(0,6deg); } #chevron::after {position: absolute;content: '';top: 0;right: 0;height: 100%;width: 50%;background: red;transform: skew(0,-6deg); } 復制代碼

14. 放大鏡（Magnifying Glass）

#magnifying-glass {width: 0.4em;height: 0.4em;position: relative;font-size: 10em;border: 0.1em solid red;border-radius: 0.35em;box-sizing: content-box; } #magnifying-glass::before {position: absolute;content: '';right: -0.25em;bottom: -0.1em;width: 0.35em;height: 0.08em;background: red;transform: rotate(45deg); } 復制代碼

15. 臉書圖標（Facebook Icon）

#facebook-icon {background: red;width: 100px;height: 110px;border: 15px solid red;border-radius: 5px;overflow: hidden;position: relative;border-bottom: 0;box-sizing: content-box; } #facebook-icon::before {position: absolute;content: '';bottom: -30px;right: -37px;width: 40px;height: 90px;border: 20px solid #eee;border-radius: 25px;background: red;box-sizing: content-box; } #facebook-icon::after {position: absolute;content: '';top: 50px;right: 5px;width: 55px;height: 20px;background: #eee;box-sizing: content-box; } 復制代碼

16. 月亮（Moon）

#moon {width: 80px;height: 80px;border-radius: 50%;box-shadow: 15px 15px 0 0 red; } 復制代碼

參考鏈接

• Chris Coyier, The Shapes of CSS

轉載于:https://juejin.im/post/5cda5868e51d453a6c23b09f

總結

以上是生活随笔為你收集整理的CSS图形每日一练（下）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。