CSS3之制作心形

最新推荐文章于 2024-07-11 16:15:52 发布

风筝风筝等等我

最新推荐文章于 2024-07-11 16:15:52 发布

阅读量5.2k

点赞数 3

文章标签： CSS3

本文链接：https://blog.csdn.net/a1k2l45k/article/details/80668761

版权

知识点

伪元素::before、::after的使用
边框的知识，border-radius
定位子绝父相

源代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .heart{
                width: 300px;
                height: 300px;
                background-color: pink;
                margin: 100px auto;
                position: relative;
            }
            .heart::before,.heart::after{
                position: absolute;

                display: block;
                content:".";
                width: 150px;
                height: 250px;
                background-color: red;
                border-top-left-radius: 50% 75px;
                border-top-right-radius: 50% 75px;
                left: 41px;
                top: 0px;
                transform: rotate(-45deg);
            }
            .heart::after{
                transform: rotate(45deg);
                left: 112px;

            }
        </style>
    </head>
    <body>
        <div class="heart">

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

效果图如下

风筝风筝等等我

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
CSS3之制作心形

知识点伪元素::before、::after的使用边框的知识，border-radius定位子绝父相源代码如下&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;
复制链接

扫一扫