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
