边框构图

最新推荐文章于 2024-08-16 18:08:49 发布

moonlight201868

最新推荐文章于 2024-08-16 18:08:49 发布

阅读量257

点赞数

本文链接：https://blog.csdn.net/moonlight201868/article/details/80739318

版权

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
*{
   margin: 0;
   padding: 0;
}
div
{
   margin:200px auto;
   width: 800px;
   height: 500px;
   background-color: pink;
}
ul
{
   list-style: none;
}
li
{
   width: 200px;
   height: 200px;
   border:1px solid;
   float: left;
   margin-top: 10px;
   margin-left:50px;
   margin-bottom: 50px;
}
li>.div1
{
     margin:30px auto;
     width: 100px;
     height: 100px;
     border:1px solid;
}
li:nth-of-type(1)>.div1
{
   border-radius: 50%;
}
li:nth-of-type(2)>.div1
{
   width: 30px;
   height: 30px;
   border:50px solid red;
   border-radius: 0px 50px 26px 50px /0px 50px 52px 50px ;
}
li:nth-of-type(3)>.div1
{
   width: 0px;
   height: 0px;
    border-left: 50px solid red;
    border-right: 50px solid black;
    border-top:50px solid yellow;
    border-bottom:50px solid blue;
}
li:nth-of-type(4)>.div1
{
   border-radius: 50px;
   background-color: red;
   border:none;
}
li:nth-of-type(5)>.div1
{
   width: 120px;
   height: 0px;
   border-top: 60px solid white;
   border-bottom: 60px solid black;
   border-radius: 100%;

}
li:nth-of-type(5)>.div1::before
{
   content: "";
   display: block;
   width: 20px;
   height: 20px;
   border:20px solid white;
   border-radius: 100%;
   background-color: black;
    margin-left: 60px;
    margin-top: -30px;
}
li:nth-of-type(5)>.div1::after
{
   content: "";
   display: block;
   width: 20px;
   height: 20px;
   border:20px solid black;
   border-radius: 100%;
   background-color: white;
    margin-left: 0px;
    margin-top: -60px;
}
li:nth-of-type(6)>.div1
{
    width: 100px;
    height: 50px;
    background-color: red;
    margin:50px auto;
    border-radius: 10px;
    
    border:none;
}
li:nth-of-type(6)>.div1::before
{
   content: "";
   display: block;
   width: 20px;
   height: 30px;
   background-color: red;
   border-radius: 0 0 30px 0/ 0 0 60px 0;
   position: relative;
   top: 8px;
   left: 94px;
}
li:nth-of-type(6)>.div1::after
{
   content: "";
   display: block;
   width: 20px;
   height: 20px;
   border-radius: 0 0 30px 0;
   background-color: pink;
   position: relative;
   top: -22px;
   left: 100px;
}
</style>
</head>
<body>
   <div>
        <ul>
        <li><div class="div1"></div></li>
        <li><div class="div1"></div></li>
        <li><div class="div1"></div></li>
        <li><div class="div1"></div></li>
        <li><div class="div1"></div></li>
        <li><div class="div1"></div></li>
        </ul>
     </div> 
   
</body>
</html>