「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」

中国结艺是中国特有的民间手工编结艺术，它以其独特的东方神韵、丰富多彩的变化，充分体现了中国人民的智慧和深厚的文化底蕴。中国结对于我们来说是有特殊意义的，一种情结，一种精神。在春节来临之际，送给大家一个福字中国结。

福字中国结

中国结一般由结体和流苏两部分组成，接下来我们要准备一下简单的dom结构，如下：

<div class="blessing">
    <span>福</span>
    <div class="ear"></div>
</div>

结体

结体也是由很多部分组成，在代码实现部分我分为挂耳、内敛、福字、结身，代码实现如下：

结身

结身为正方形，里面也处理了一些福字的样式。

.blessing {
    --w: 10rem;
    width: var(--w);
    height: var(--w);
    box-sizing: border-box;
    color: #e63924;
    border: calc(var(--w) * 0.02) solid currentColor;
    position: relative;
    text-align: center;
    line-height: calc(var(--w) * 0.96);
    font-size: calc(var(--w) * 0.75);
    font-family: cursive;
    font-weight: bold;
    transform: rotate(-45deg);
}

挂耳

挂耳部分有挂耳，也有挂耳横线部分。

/* 挂耳横 */
.blessing::after {
    content: '';
    width: 25%;
    height: calc(var(--w) * 0.04);
    background-color: currentColor;
    border-radius: calc(var(--w) * 0.02);
    position: absolute;
    right: -28%;
    top: -2%;
    transform: translate(-50%, -50%) rotate(45deg);
}
/* 挂耳 */
.ear {
    width: calc(var(--w) * 0.15);
    height: calc(var(--w) * 0.15);
    background-color: currentColor;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    --move: calc(var(--w) * -0.15);
    transform: translate(var(--move), var(--move));
    --bmove: calc(var(--w) * 1.11);
    box-shadow: calc(var(--w) * 1.13) calc(var(--w) * -0.01), 0 var(--bmove),
            var(--bmove) var(--bmove);
}
.ear::before {
    content: '';
    width: 40%;
    height: 40%;
    color: #fff;
    background-color: currentColor;
    position: absolute;
    top: 30%;
    left: 30%;
    box-shadow: calc(var(--w) * 1.13) calc(var(--w) * -0.01), 0 var(--bmove),
            var(--bmove) var(--bmove);
}

内敛内敛其实是结身内部的四个边角的装饰。

.ear::after {
    content: '';
    width: 50%;
    height: 50%;
    position: absolute;
    right: 0;
    bottom: 0;
    --m: calc(var(--w) * 0.075);
    --scale: calc(var(--w) * 0.075 * -0.2);
    --iw: calc(var(--w) * 0.96);
    color: #f4b4af;
    box-shadow: var(--m) var(--m) 0 var(--scale) #fff,
            var(--m) var(--m) 0 currentColor,
            calc(var(--m) * 2) var(--m) 0 var(--scale) #fff,
            calc(var(--m) * 2) var(--m) 0 currentColor,
            var(--m) calc(var(--m) * 2) 0 var(--scale) #fff,
            var(--m) calc(var(--m) * 2) 0 currentColor,
            var(--iw) var(--m) 0 var(--scale) #fff,
            var(--iw) var(--m) 0 currentColor,
            calc(var(--iw) - var(--m)) var(--m) 0 var(--scale) #fff,
            calc(var(--iw) - var(--m)) var(--m) 0 currentColor,
            var(--iw) calc(var(--m) * 2) 0 var(--scale) #fff,
            var(--iw) calc(var(--m) * 2) 0 currentColor,
            var(--m) calc(var(--iw) - var(--m)) 0 var(--scale) #fff,
            var(--m) calc(var(--iw) - var(--m)) 0 currentColor,
            calc(var(--m) * 2) var(--iw) 0 var(--scale) #fff,
            calc(var(--m) * 2) var(--iw) 0 currentColor,
            var(--m) var(--iw) 0 var(--scale) #fff,
            var(--m) var(--iw) 0 currentColor,
            var(--iw) calc(var(--iw) - var(--m)) 0 var(--scale) #fff,
            var(--iw) calc(var(--iw) - var(--m)) 0 currentColor,
            var(--iw) var(--iw) 0 var(--scale) #fff,
            var(--iw) var(--iw) 0 currentColor,
            calc(var(--iw) - var(--m)) var(--iw) 0 var(--scale) #fff,
            calc(var(--iw) - var(--m)) var(--iw) 0 currentColor;
}

福字福字只是简单的用文字表示，如果不在乎增加dom元素，可以考虑用css画出来。

div span {
    display: inline-block;
    transform: rotate(45deg);
}

流苏

流苏的实现方式很简单，给个横线，然后跑配合阴影在多增加几道横线就形成了流苏。

.blessing::before {
    content: '';
    width: 80%;
    height: calc(var(--w) * 0.01);
    background-color: currentColor;
    box-shadow: 0 calc(var(--w) * 0.02), 0 calc(var(--w) * -0.02);
    position: absolute;
    bottom: -40%;
    left: -39%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

总结

整体的实现都是比较简单的，只是考虑的情况比较多，另外内敛的实现用到了很多阴影。对于阴影，我们可以重复的使用它，可以节省很多元素节点，但是我们要注意：阴影的图层是先设置的在最上层。

（十三）巧用CSS3之中国结

福字中国结

结体

流苏

总结