css实战#用css画一个中国结

然后开始写样式中国结显示在中心：body{margin:0;填充：0；高度：100vh；显示：弹性；对齐项目：居中；justify-content:center;}设置中国结的容器样式：.knot{box-sizing:border-box;字体大小：100px；宽度：2em；高度：1.6em；背景：天蓝色；显示：弹性；基本样式：.box{position:absolute;框大小：边框框；宽度：1em；高度：0.4em；border:var(--b)实心耐火砖；--b:0.1em;}然后我们调整每个矩形样式，将它们组合成结的基本形状：.knot.box:nth-child(1){transform:rotate(45deg)translate(-15%,-38%);边界半径：20%0%0%20%/50%0050%;}.knot.box:nth-child(2){transform:rotate(45deg)translate(15%,37%);边界半径：0%20%20%0%/0%50%50%0%;}.knot.box:nth-child(3){transform:rotate(-45deg)translate(15%,-38%);边界半径：0%20%20%0%/0%50%50%0%;}.knot.box:nth-child(4){transform:rotate(-45deg)translate(-15%,37%);border-radius:20%0%0%20%/50%0050%;}最后，我们绘制剩下的两个小圆圈：.knot.box:nth-child(1)::after{box-sizing：边框框；内容：'';位置：绝对；宽度：0.4em；高度：0.4em；border:var(--b)实心耐火砖；边界半径：50%50%50%0%；顶部：-0.4em；right:-0.4em;}.knot.box:nth-child(2)::在{box-sizing:border-box;内容：'';位置：绝对；宽度：0.4em；高度：0.4em；border:var(--b)实心耐火砖；边界半径：50%0%50%50%；顶部：0.2em；right:0.8em;}大功告成！