DIV+CSS实现网页爱心图案

最新推荐文章于 2022-09-30 10:50:12 发布

toMontain

最新推荐文章于 2022-09-30 10:50:12 发布

阅读量514

点赞数 1

分类专栏： H5 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_43884946/article/details/122240193

版权

H5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用DIV+CSS实现绘制网页爱心图案

实现效果：

代码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style>
   #div5{
    position: relative;
    left: 25%;
    width: 1000px;
    height: 900px;
    /* background-color: plum; */
   }
   #div5:before,#div5:after{
    position: absolute;
    content: "";
    left: 500px;
    top: 100px;
    width: 500px;
    height: 800px;
    background-color: red;
    border-radius: 500px 500px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
   }
   #div5:after{
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
   }
  </style>
 </head>
 <body>
  <div id="div5"></div>
 </body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

toMontain

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
DIV+CSS实现网页爱心图案

使用DIV+CSS实现绘制网页爱心图案实现效果：代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> #div5{ position: relative; left: 25%; width: 1000px; height: 900px; /* bac
复制链接

扫一扫