css做三角形-[第2564期]CSS映射冰盾盾

前言

CSS绘图系列又来了。 通过这些方式来理解 CSS 也是一种非常好的形式。 今天的后端早读课文章由滴滴@凉木贡献分享。

@王宏宇，又名吉木css做三角形，喜欢开猫烫头，来自滴滴小橘车服务，致力于提升体验和产研效率

正文从这里开始~~

冰敦敦（英语：Bing Dwen Dwen，拼音：bīng dūn dūn），是2022年北京冬奥会吉祥物。 将熊猫形象与超能量丰富的冰晶外壳相结合，头壳造型取自冰雪运动头盔，饰有多彩光环，整体形象酷似宇航员。

以前笔试总是问css做三角形，如何用CSS画三角形。 今天我想玩点大事，用CSS画一个冰墩！

1 基本结构定义

先看官方图。

我们可以将各个部分拆分成div，然后分别为div制作CSS，最后组装出整个图片。

<div class="bingdundun-container">
    <div class="ear"></div>
    <div class="hand-left"></div>
    <div class="hand-right"></div>
    <div class="body"></div>
    <div class="foot"></div>
    <div class="face"></div>
    <div class="eye"></div>
    <div class="eye-hole"></div>
    <div class="nose"></div>
    <div class="mouth"></div>
</div>

对于这个划分，你可能有很多问号，比如：

下面的操作会给你答案。

绝对定位和遮蔽

然后我们给所有的div一个绝对位置：

.bingdundun-container {
  position: relative;
  div {
    position: absolute;
  }
}

这样，就像sketch和ps一样，我们就有了很多个视口。 在绝对定位下，图层具有自上而下的顺序，这也是定义上面结构的基础。

但 CSS 的功能并不止于此。 通过伪元素，div 理论上可以提供三个视口：本身、之前和之后。 我们也是统一添加的。

.bingdundun-container {
  div {
    &:before,
    &:after {
        position: absolute;
        content: '';
    }
  }
}

2 动手操作

接下来我们要一幅幅的画，里面夹杂着介绍属性的简单描述，一口饭一口饭。

身体

冰墩墩的身体呈鸡蛋形状，头顶比脚底丰满。 这个很容易做到，一组border+radius就可以做到。

.bingdundun-container {
  width: 488px;
  height: 557px;
  left: 255px;
  top: 158px;
  border: 10px solid #000;
  background: #fff;
  border-top-left-radius: 240px;
  border-top-right-radius: 240px;
  border-bottom-left-radius: 194px 253px;
  border-bottom-right-radius: 194px 253px;
}

得到一个鸡蛋

知识点1：border-radius让方框围绕眼睛

耳朵也类似，两个鸡蛋，放在一个div中，因为上面我们说了，一个div最多可以提供三个viewport

.ear {
  &::before, &::after {
    width: 98px;
    height: 125px;
    background: #000;
    border-radius: 50%;
  }
  &::after {
    left: 596px;
  }
}

因为 div 位于前面，所以下半部分刚刚被 body 淹没了。

左手

左手呈水滴状。 看来可以尝试更大的边框半径，但是不行。 您可以使用正方形+三角形将其组合在一起。 三角形是通过边框实现的。

.hand-left {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #000;
  &::before {
    width: 0;
    height: 0;
    border: 50px solid;
    border-color: transparent #000 #000 transparent;
  }
}

知识点2：巧妙利用边框画三角形

沿着内容框和边框框角的连线划分元素四个方向的边框，可以绘制三角形和梯形。

右手

右手是一个椭圆+一颗心（分成两个椭圆拼在一起），三个视口就够了。 还引入了变换旋转属性。

.hand-right {
  width: 89px;
  height: 176px;
  background: #000;
  transform: rotate(30deg);
  border-bottom-right-radius: 89px;
  border-top-left-radius: 40px;
  border-top-right-radius: 49px;
  &::before {
    width: 16px;
    height: 30px;
    transform: rotate(19deg);
    background: red;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 16px;
  }
  &::after {
    width: 16px;
    height: 30px;
    transform: rotate(-71deg);
    background: red;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 16px;
  }
}

知识点3：transform改变元素的形状

这脚看上去有点难驾驭。 圆角虽然和椭圆类似，但是几个方向还是比较棘手的。 这里果断分成两部分，一部分堆在身下，一部分堆在身子上。 稍微调整一下html。

<div class="foot-bottom"></div>
<div class="body"></div>
<div class="foot-top"></div>

下半身

.foot-bottom {
  left: 500px;
  top: 677px;
  &::before {
    right: 36px;
    width: 115px;
    height: 116px;
    background: #000;
    border-top-left-radius: 9px 90px;
    border-top-right-radius: 9px 83px;
    border-bottom-left-radius: 35px;
    border-bottom-right-radius: 14px;
  }
  &::after {
    left: 36px;
    width: 115px;
    height: 116px;
    background: #000;
    border-top-right-radius: 9px 90px;
    border-top-left-radius: 9px 83px;
    border-bottom-right-radius: 35px;
    border-bottom-left-radius: 14px;
  }
}

大家有没有发现，两只脚是对称的，这里的元素设置在中间，本身没有任何意义，但是两个伪元素可以对称的写，非常方便。

身体的上半部分

同样的对称图。

.foot-top {
  left: 500px;
  top: 677px;
  &::before {
    right: 38px;
    width: 100px;
    height: 37px;
    background: #000;
    border-top-right-radius: 100%;
  }
  &::after {
    left: 38px;
    width: 100px;
    height: 37px;
    background: #000;
    border-top-left-radius: 100%;
  }
}

与身体下部重叠即可。

脸部轮廓

脸部的轮廓是由几圈彩色的袖子组成的。

一个圆好办，给个边框就行； 三个圆也好办，顶多用两个伪元素就可以了。 如果圈子多了怎么办？ 我们可以使用盒子阴影。

.face {
  width: 400px;
  height: 320px;
  border-top-left-radius: 50% 60%;
  border-top-right-radius: 50% 60%;
  border-bottom-left-radius: 41% 42%;
  border-bottom-right-radius: 41% 42%;
  box-shadow: 0 0 0 5px #006BB0, 0 0 0 10px #DC2F1F, 0 0 0 15px #1D1815, 0 0 0 20px #EFA90D, 0 0 0 25px #059341;
}

知识点4：box-shadow强力复印机

这个很有想象力，就像复印机一样：

眼睛、鼻子、嘴巴

同样的方法，使用上面提到的border-radius、transform、border等属性。

瞳孔

这个原本很简单，两个对称的有边框的圆圈，但是有一个小细节，就是瞳孔上的水汪汪的眼睛不对称。

那么该怎么办？ 自己居中的div不是闲着吗，就让他用box-shadow打下来吧。

.eye-hole {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  box-shadow: -75px 19px #fff, 81px 19px #fff;
}

结束

至此，丙敦敦已经画完了。

GitHub预览：

关于本文