巧用CSS3之雨伞

下雨了，来把雨伞🌂吧。

雨伞

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

结构

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，然后给左上角↖️和右上角↗️圆角效果，然后在再给一个内阴影效果，形成的效果如下： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zB3Dd4LA-1658297140569)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6d83178e427f43fcb93b0c388ea590a5~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]

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

.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);
} 

伞杆为黄色部分，伞把手为暗青色部分，如下： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NPcrvsd4-1658297140570)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2f9746087c584eb79a3c2eaab02d3a6d~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]

效果

最终形成的效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3qrQU0mI-1658297140570)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2ba7026ee9b64ccfb9f1c5aa7c530f55~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]

总结

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