一个看得还算像中国结的中国结

最新推荐文章于 2024-10-07 19:39:47 发布

AKA悍匪-阿伟

最新推荐文章于 2024-10-07 19:39:47 发布

阅读量122

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/m0_54230910/article/details/120405918

版权

首先创建四个div盒子

<div class="cla1"></div>
        <div class="cla2"></div>
        <div class="cla3"></div>
        <div class="cla4"></div>

并设置它们的样式，注意各个宽高的值以及圆角的设置，还有定位

.cla1{
            width: 50px;
            height: 150px;
            border: red solid 5px;
            margin: 60px 0px 0px 60px;
            position: absolute;
            border-bottom-left-radius: 30px;
            border-bottom-right-radius:30px
        }
        .cla2{
            width:100px;
            height:50px;
            border: red solid 5px;
            positon:absolute;
            margin: 60px 0px 0px 115px;
            border-top-right-radius: 30px;
            border-bottom-right-radius: 30px;
        }
        .cla3{
            width: 50px;
            height: 150px;
            border: red solid 5px;
            position: absolute;
            margin: -105px 0px 0px 115px;
            border-top-left-radius: 30px;
            border-top-right-radius:30px;
        }
        .cla4{
            width: 100px;
            height: 50px;
            border: red solid 5px;
            position: absolute;
            margin: -5px 0px 0px 10px;
            border-top-left-radius: 30px;
            border-bottom-left-radius: 30px;
        }

然后再创建两个盒子当作他们的小耳朵

<div class="cla5"></div>
        <div class="cla6"></div>

再次设置样式

.cla5{
            width: 50px;
            height: 50px;
            border:red solid 5px;
            position:absolute;
            margin: -115px 0px 0px 5px;
            border-top-right-radius: 40px;
            border-top-left-radius:40px;
            border-bottom-left-radius:40px;
        }
        .cla6{
            width:50px;
            height:50px;
            border: red solid 5px;
            position:absolute;
            margin:50px 0px 0px 170px;
            border-top-right-radius:40px;
            border-bottom-left-radius:40px;
            border-bottom-right-radius:40px;
        }

再创建一个盒子把这六个盒子装进去，然后给这个盒子添加样式给它来个旋转，这样一个简易的中国结就OK啦

<div class="smabit">

.smabit{
            left: 79px;
            top: 115px;
            position: absolute;
            transform:rotate(137deg) ;
        }