CSS简笔画logo系列：纯CSS绘制“Adidas” Logo
CSS简笔画logo系列：纯CSS绘制“Adidas” Logo
本节你能get到什么前端知识
1、CSS Flex垂直居中对齐
2、CSS clip 剪裁
3、CSS box-shadow 多阴影
看图解构
看图很简单咯，Adidas Logo就是用3个“梭形”组成，然后添加3条和底色一样颜色的线覆盖在上面即可。
什么是“梭形”？
船大家都见过吧，它就是“梭形”形状的，类似于“菱形”，但是“梭形”两头都是圆圆的，不是尖尖的角。生活中，还有很多花瓣也都是“梭形”的。
logo底图
<div id="adidas">
<div class="logo">
</div>
</div>body {
width: 100%;
height: 100vh;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
--bgColor: #017ac3;
}
#adidas {
position: relative;
height: 325px;
overflow: hidden;
width: 325px;
border-radius: 50%;
background: var(--bgColor);
}
flex布局如何水平垂直居中？
要用水平垂直居中元素的父元素添加下面样式，且它本身要有高度和宽度（被子元素撑大也可以），该父元素下面只能有它一个子元素。
display: flex;
justify-content: center;
align-items: center;CSS “梭形”
<div id="adidas">
<div class="logo">
<div class="leaf1">
<div class="leaf-t1"></div>
<div class="leaf-t2"></div>
</div>
</div>
</div>#adidas * {
position: absolute;
}
#adidas .leaf1 {
top: 50px;
left: 111px;
}
#adidas .leaf-t1{
background: #fff;
border-radius: 204px/280px;
clip: rect(18px 43px 255px 0px);
height: 280px;
top: -68px;
width: 194px;
}
#adidas .leaf1 .leaf-t1{
height: 250px;
}
我们用CSS实现“梭形”就好复杂一点，用clip裁剪两个扇形，拼接而成一个“梭形”。上图就是clip裁剪后的图形，然后画出另外一个
css clip属性：
clip 属性剪裁绝对定位元素，clip 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。
#adidas .leaf-t2 {
background: #fff;
border-radius: 204px/280px;
clip: rect(18px 43px 255px 0px);
height: 280px;
top: -68px;
width: 194px;
}
#adidas .leaf1 .leaf-t2 {
height: 250px;
}
/**
上面两个没有区别，主要是下面这段样式
调整位置并旋转180°
*/
#adidas .leaf-t2 {
left: -109px;
transform: rotate(180deg);
}
依次，其他两个“梭形”也就出来了
<div id="adidas">
<div class="logo">
<div class="leaf1">
<div class="leaf-t1"></div>
<div class="leaf-t2"></div>
</div>
<div class="leaf2">
<div class="leaf-t1"></div>
<div class="leaf-t2"></div>
</div>
<div class="leaf3">
<div class="leaf-t1"></div>
<div class="leaf-t2"></div>
</div>
</div>
</div>#adidas .leaf-t1,
#adidas .leaf-t2 {
...
/* 所有扇形除了裁剪，高度外其他样式都一样 */
}
#adidas .leaf-t2 {
left: -109px;
transform: rotate(180deg);
}
#adidas .leaf1 .leaf-t1,
#adidas .leaf1 .leaf-t2 {
height: 250px;
}
#adidas .leaf2 .leaf-t1,
#adidas .leaf2 .leaf-t2,
#adidas .leaf3 .leaf-t1,
#adidas .leaf3 .leaf-t2 {
clip: rect(20px 38px 220px 0px);
height: 240px;
}
#adidas .leaf2 {
left: 0px;
top: 123px;
transform: rotate(-40deg);
}
#adidas .leaf2 .leaf-t1,
#adidas .leaf2 .leaf-t2 {
border-radius: 200px/287px;
width: 200px;
}
#adidas .leaf2 .leaf-t1 {
left: 5px;
}
#adidas .leaf2 .leaf-t2 {
left: -120px;
}
#adidas .leaf3 {
left: 241px;
top: 69px;
transform: rotate(40deg);
}
#adidas .leaf3 .leaf-t1,
#adidas .leaf3 .leaf-t2 {
border-radius: 200px/287px;
width: 200px;
}
#adidas .leaf3 .leaf-t1 {
left: 4px;
}
#adidas .leaf3 .leaf-t2 {
left: -121px;
}
CSS box-shadow
CSS box-shadow 多阴影，前面很多文章都有提到过，大家先看看用法：
box-shadow: h-shadow v-shadow blur spread color inset;
属性值描述 h-shadow 指阴影水平偏移量，其值可正可负，正值，则阴影在对象的右边，负值，阴影在对象的左边
v-shadow 指阴影的垂直偏移量，其值也可以是正负值，正值，阴影在对象的底部，负值时，阴影在对象的顶部
blur 阴影模糊半径，此参数是可选，只能为正值，如果其值为0时，表示阴影不具有模糊效果，值越大阴影的边缘就越模糊
spread 阴影扩展半径，其值可为正负值，正值，则整个阴影都延展扩大，反之，则缩小
color 阴影颜色，不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。
inset 阴影类型，默认的投影方式是外阴影；inset就是将外阴影变成内阴影
注意：多层阴影，最内层优先级最高，之后依次降低。使用逗号“，”隔开。
大家看图，应该就能明白box-shadow多层阴影遵循的规律了。
回到我们正题上
<div id="adidas">
<div class="logo">
...
<div class="stripes"></div>
</div>
</div>#adidas .stripes {
box-shadow:
0 24px 0 0 var(--bgColor),
0 48px 0 0 var(--bgColor);
height: 12px;
left: 0;
top: 128px;
width: 100%;
z-index: 10;
}
元素本身是一道横线，然后多阴影添加2个，这样就是3道横线了。
结语
本节内容就到此结束了，大家应该或多或少都有些收获吧，关注我，学习更多前端知识，但不止于前端哦！
小伙伴们，有问题可以评论区留言哦，欢迎大家点评。
谢谢大家一直以来的支持！