持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天，点击查看活动详情

下雨了，来把雨伞🌂吧。

雨伞

雨伞绘画的时候分成三部分：伞面、伞杆和伞把手。

结构

container用来画伞面，其伪元素before用来画伞杆，其伪元素after用来画伞把手，结构如下：

<div class="container"></div>

样式

先给body一个样式，让伞更好的呈现出来，如下：

 body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

接下来就是伞面的样式，伞面我们画出一个半圆形的样式，然后给适量的阴影效果，代码如下：

.container {
    --size: 5rem;
    width: calc(var(--size) * 2);
    height: var(--size);
    border-radius: 50% 50% 0 0 /100% 100% 0 0;
    box-shadow: 0 0 calc(var(--size) * 0.1) cyan inset;
    position: relative;
}

扇面的宽高比为2 ：1，然后给左上角↖️和右上角↗️圆角效果，然后在再给一个内阴影效果，形成的效果如下：

然后就是伞杆和伞把手了，都是使用的伪元素，所以我们要先给一个统一的样式，如下：

.container::before,
.container::after {
    content: '';
    position: absolute;
}

伞杆虽然很好画，但是要注意一下它在整个伞的位置，要和伞面衔接好，如下：

.container::before {
    width: calc(var(--size) * 0.05);
    height: calc(var(--size) * 1.2);
    top: var(--size);
    left: calc(50% - var(--size) * 0.025);
    background: #0a8282;
}

伞把手的样式其实和伞面差不多，需要注意的是要和伞杆无缝衔接，如下：

.container::after {
    width: calc(var(--size) * 0.5);
    height: calc(var(--size) * 0.25);
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    box-sizing: border-box;
    border: calc(var(--size) * 0.05) solid #0a8282;
    border-top-width: 0;
    top: calc(var(--size) * 2.2);
    left: calc(var(--size) * 0.525);
}

伞杆为黄色部分，伞把手为暗青色部分，如下：

效果

最终形成的效果如下：

总结

因为伞的大小及其内部的位置都是根据变量--size来的，所以你可以通过改变它的大小来改变伞的大小。