CSS 标志：Netflix 标志
今天的文章中，我们将重新制作Netflix的标志性logo。在制作过程中，我发现这个logo其实很简单。
自己尝试一下超级有趣💖
我们来看一下这个标志。
分析标志
该标志由三根大小相同的木棍组成；但是，中间那根木棍投下阴影，而且是歪的。
然后值得注意的是，底部的标志略呈圆角状。
我的想法是利用边框来支撑两侧的柱子，并使用伪元素来保持倾斜角度，再加上圆弧形的底部部分。
使用 CSS 重现 Netflix 徽标
让我们创建一个简单的盒子，并设置左右边框开始吧。
.netflix {
height: 15rem;
width: 3rem;
border-left: 3rem solid #e50914;
border-right: 3rem solid #e50914;
position: relative;
}
需要注意的是，这3rem将是每根棍子的尺寸。
目前，我们得到了以下样式元素。
我们来添加一个前置元素，用来添加第三条倾斜线。
主要思路是，这条线可以简单地设置为盒子的宽度和高度。
&:before {
display: block;
content: '';
width: 100%;
height: 100%;
background: #e50914;
transform: skewX(21.5deg);
box-shadow: 0 0 30px black;
}
我们可以看到，我们倾斜元素以适应边缘，并添加一些盒阴影以将阴影投射到下面的棍子上。
我们最后需要的就是底部圆角效果。
我们会利用一个偏离底部的圆形盒子。
&:after {
content: '';
width: 15rem;
height: 2rem;
background: black;
border-radius: 50%;
display: block;
position: absolute;
left: -200%;
top: 98%;
}
由此产生了以下 CodePen 示例。
感谢阅读，让我们保持联系！
感谢您阅读我的博客。欢迎订阅我的电子邮件简讯，也可以在Facebook或Twitter上关注我。
文章来源：https://dev.to/dailydevtips1/css-logos-netflix-logo-3mnf