使用HTML和CSS做出心形图案
  yQfRNkVtsm2H 2023年11月02日 113 0

今天我们要做一个心形图案,闲来无事可以尝试做一些其他图案。也可以用来逗心爱的女孩开心。例如:

使用HTML和CSS做出心形图案_心形制作

先看步骤

使用HTML和CSS做出心形图案_心形制作_02

先给正方形上方和右方两侧做两个圆

使用HTML和CSS做出心形图案_html_03

圆的做法就是border-radius:50%,就是圆形了

使用HTML和CSS做出心形图案_心形制作_04

最后给他们翻转45°

下面是整体代码,大家想尝试直接复制到自己代码中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            position:relative;
            width:100px;
            height:100px;
            background:pink;
            margin-left:100px;
            margin-top:100px;
            transform:rotate(-45deg);

        }
        .one:before{
            content:"";
            position:absolute;
            width:100px;
            height:100px;
            background-color:pink;
            border-radius:50%;
            top:-50px;
            left:0;
        }
        .one:after{
            content:"";
            position:absolute;
            background-color:pink;
            border-radius:50%;
            height:100px;
            width:100px;
            left:50px;
            top:0;
        }

    </style>
</head>
<body>
<div class="one"></div>
</body>
</html>


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  NHaurzrhyr04   2023年12月23日   106   0   0 htmljQueryhtmljQuery
  BEOpup9HILHT   2023年12月23日   79   0   0 htmljQueryhtmljQuery
yQfRNkVtsm2H