用html+css给女朋友写一个爱心

最新推荐文章于 2023-02-09 20:10:30 发布

超级码农233

最新推荐文章于 2023-02-09 20:10:30 发布

阅读量1.7k

点赞数 3

文章标签： css html html5

本文链接：https://blog.csdn.net/lslslsls77/article/details/120774789

版权

这是最后的样子，用一个div，再用before和after就行了

这是html

<!DOCTYPE html>
<html>
   <head>
       <link rel="stylesheet" type="text/css" href="css/ax.css"/>
       <meta charset="utf-8" />
       <title></title>
   </head>
   <body>
       <div class="ax">

       </div>
   </body>
</html>

再加上css

*{
   padding: 0px;
   margin: 0px auto;
}
.ax{
   width: 200px;
   height: 200px;
   background-color: red;
   content: "";
   margin: 200px auto;
   transform: rotate(45deg);
   position: relative;

}
.ax:before{
   width: 200px;
   height: 200px;
   background-color: red;
   content: "";
   border-radius: 50%;
   position: absolute;
   right: 100px;
   box-shadow: 100px -100px 0 red;
}
/*.ax:after{
   width: 200px;
   height: 200px;
   background-color: red;
   content: "";
   border-radius: 50%;
   position: absolute;
   top: -100px;
}*/