程序員圖形創作的奇思妙想---CSS偽元素、單標籤、SVG

HTML 的一個標籤在遇見 CSS 偽元素之前或許什麼也做不了，但是，當他們相遇，就有了一段奇妙的化學反應，彷彿七巧板，創造出不同圖案。

CSS3奇思妙想：單標籤實現各類圖形

SVG奇思妙想：使用 SVG or clip-path 創建的圖形

利用圓形和正方形：

 .heartShaped {
 position: absolute;
 top:50%;
 left: 50%;
 transform:translate(-50%,-50%) rotate(45deg);
 background: rgba(255, 20, 147, .85);
 width: 140px;
 line-height: 140px;
 text-align: center;
 color: white;
 font-size: 12px;
 }
 .heartShaped:before,
 .heartShaped:after
 {
 content: '';
 position: absolute;
 top: 0;
 left: -70px;
 width: 140px;
 height: 140px;
 border-radius: 50%;
 background: rgb(255, 20, 147);
 z-index: -1;
 }
 .heartShaped:after{
 top: -70px;
 left: 0;
 }

利用線性漸變、陰影、縮放：

利用 border 的 transparent 特性：

利用border、box-shadow ：

藉助了兩個偽元素實現了整體結構，shadow 生成另外兩層整體陰影：抖音的 logo：

GitHub 地址：

CSS奇思妙想：https://github.com/chokcoco/magicCss

SVG奇思妙想：https://github.com/chokcoco/svg