程序员图形创作的奇思妙想---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