开搞开搞
先来测量一下抖音 logo 中 音符 的长宽比，为了等会给音符留出一定的空间
特地用截图工具圈出了红色音符的部分，得到的宽高是 248 * 285，计算一下宽高比就约等于 248/285 = 0.87，那我们就要在中间留出一个宽高比为 0.87 的矩形位置给音符
打地基
那就先打地基！
<style> .douyin { width: 100px; aspect-ratio: 0.87; /* 宽高比 0.87 */ border-radius: 25%; padding: 20px calc(20px + 100px / 0.87 * 0.13 / 2); /* 四周留白，中间腾出位置给音符 */ background-color: #000; } </style> <div class="douyin" />
这里需要解释一下 padding 的值的设定，20px 是我随便设置的一个边距大小，既然顶部和底部都是 20px，而且本身整体元素的宽高比又不是 1:1（整体不是正方形），那为了视觉上的居中和整体宽高的 1:1，我们需要将左右边距增大至整体宽度与高度相等
因此 100px / 0.87 拿到的就是整体的高度，再乘以 0.13 拿到的就是宽高的差值，因为要平均分到两边，所以还要除以 2
现在妥妥是个正方形了，当前的效果：
这里为了让等会的音符只在图中的那块儿区域绘制，我们给外部容器设置一下 display: grid，等会还需要借助 grid 布局的能力
.douyin::before, .douyin::after { content: ''; grid-area: 1/1; /* 居中展示 */ }
画1/4圆环
如何画圆环？用一个简单的例子来演示一下：
<style> .demo { /* demo 是一个正方形 */ background: radial-gradient( 100% 100% at 100% 100%, transparent 0 50%, red 50% 100%, transparent, ); } </style> <div class="demo"/>
我们就得到了一个这样的图形：
怎么得到这样的 1/4圆环 的呢？我们把样式拆解一下：
100% 100% at 100% 100%：
at 的左侧 表示圆（或椭圆）在横向、竖向的半径长度；at 的右侧 表示圆形在坐标轴上的位置
那对应到这个图上就是：
transparent 0 50%
radial-gradient() 函数除了第一个参数，其余的参数都表示 颜色及渐变程度
因此 transparent 0 50% 表示从 圆心 开始到 半径为一半长度的位置 颜色为 透明
这里怕大家看不出来，我把 transparent 改成 blue，放效果图给大家看：
red 50% 100%
原理同上一个，从半径为 50% 的位置一直到半径为 100% 的部分，显示红色
效果图为：
其实只有 黄色箭头 所指出的这个区域是我们代码造成的，那为什么一直到正方形的左上角都是红色呢？因为radial-gradient() 函数需要最后设置一个 color-stop，请看下面
transparent
这也是函数的最后一个参数，表示渐变以透明色 为结束，即从上一个位置（red 50% 100%）的结束位置开始一直到容器的边缘，都显示为透明
现在再来看看效果：
这样一个 1/4圆环 就画好了
那么回到我们的正文来
.douyin::before, .douyin::after { content: ''; grid-area: 1/1; /* 居中展示 */ + background: + radial-gradient( + 100% 100% at 100% 100%, + transparent 0 50%, + #08fff9 50% 100%, + transparent + ); }
现在咱们存放音符的容器是一个宽高比为 0.87 的长方形，如果按照我们刚刚画矩形的代码来，最后出来的应该是这样的：
很明显，圆环的两端宽度不一致，此时我们可以利用 background-size 对其进行压缩，以此得到一个宽度一致的圆环，我摆烂了，懒得计算了，直接控制台微调吧
这下差不多等宽了，且大概是一个标准的 1/4圆环，然后咱们要把它放到左侧中间靠下一点的位置，代码如下：
.douyin::before, .douyin::after { content: ''; grid-area: 1/1; /* 居中展示 */ background: radial-gradient( 100% 100% at 100% 100%, transparent 0 50%, #08fff9 50% 100%, transparent ) + left 52%/41% 36% no-repeat; }
有内味儿了，有没有？
画半圆
原理都相似，就放一个半圆的生成以及位移过程图吧：
代码如下，也不过多解释各种数值的意义了，因为我全是微调的：
.douyin::before, .douyin::after { content: ''; grid-area: 1/1; /* 居中展示 */ background: radial-gradient( 100% 100% at 100% 100%, transparent 0 50%, #08fff9 50% 100%, transparent ) left 52%/41% 36% no-repeat, + radial-gradient( + 50% 100% at top, + transparent 44%, + #08fff9 45% 98%, + transparent + ) 0 100%/73% 31% no-repeat; }
画长条
长条可能跟圆环和半圆不太一样，它用到的是 linear-gradient() 线性函数，我们也不搞花里胡哨的操作，就直接把整个区域都铺满颜色，然后通过横纵缩放得到一个长方形吧
.douyin::before, .douyin::after { content: ''; grid-area: 1/1; /* 居中展示 */ background: radial-gradient( 100% 100% at 100% 100%, transparent 0 50%, #08fff9 50% 100%, transparent ) left 52%/41% 36% no-repeat, radial-gradient( 50% 100% at top, transparent 44%, #08fff9 45% 98%, transparent ) 0 100%/73% 31% no-repeat, + linear-gradient(#08fff9, #08fff9) 66% 0/20% 70% no-repeat; }
效果过程动画如下：
画半径稍大一些的1/4圆环
再次略过讲解，直接看代码：
.douyin::before, .douyin::after { content: ''; grid-area: 1/1; /* 居中展示 */ background: radial-gradient( 100% 100% at 100% 100%, transparent 0 50%, #08fff9 50% 100%, transparent ) left 52%/41% 36% no-repeat, radial-gradient( 50% 100% at top, transparent 44%, #08fff9 45% 98%, transparent ) 0 100%/73% 31% no-repeat, linear-gradient(#08fff9, #08fff9) 66% 0/20% 70% no-repeat, + radial-gradient( + 100% 100% at 100% 0, + transparent 0 58%, + #08fff9 58.5% 99%, + transparent + ) 100% 0/47% 41.8% no-repeat; }
效果图如下：
到此为止，一个音符就画好了，离成功只剩一步之遥
