2021-10-10

使用css写出中国结

一、效果图

 

二、使用步骤

1.HTML

代码如下（示例）：

<div id="bb">
            <div class="box1"></div>
            <div class="box1"></div>
            <div class="box1"></div>
            <div class="box1"></div>
            <div class="yuan1"></div>
            <div class="yuan2"></div>
        </div>

2.CSS

代码如下（示例）：

body{
                padding: 0rem;
                margin: 0rem;
            }
            #bb{
                margin-left: 550px;
                margin-top: 400px;
            }
            .box1{
                width: 40px;
                height: 160px;
                border:  solid red 15px;
                border-radius: 50px 50px 0px 0px;
                /* border-top-right-radius: 50%;
                border-top-left-radius: 50%; */
            }
            .box1:first-child{
                transform: rotate(40deg);
                margin-left: 128px;
                position: absolute;
                /* border-right-style: none; */
                
            }
            .box1:nth-child(2){
                transform: rotate(-50deg);
                position: absolute;
                margin-left: 120px;
            }
            .box1:nth-child(3){
                transform: rotate(130deg);
                position: absolute;
                margin: 90px 0px 0px 140px;
            }
            .box1:nth-child(4){
                transform: rotate(-140deg);
                position: absolute;
                margin: 85px 0px 0px 125px;
            }
            .yuan1,.yuan2{
                width: 40px;
                height: 40px;
                border: solid #FF0000 15px;
                border-radius: 50% 50% 0% 50%;
                position: absolute;
            }
            .yuan1{
                transform: rotate(-40deg);
                margin: 105px 0px 0px 16px;
            }
            .yuan2{
                transform: rotate(130deg);
                margin: 92px 0px 0px 244px;
            }