用CSS伪类选择器做一个爱心

最新推荐文章于 2021-08-14 17:03:51 发布

巧克力很苦

最新推荐文章于 2021-08-14 17:03:51 发布

阅读量335

点赞数

分类专栏： html+css 文章标签：用CSS伪类选择器做一个爱心

本文链接：https://blog.csdn.net/qq_44607694/article/details/87913380

版权

html+css 专栏收录该内容

54 篇文章 23 订阅

订阅专栏

用CSS伪类选择器做一个爱心

这里我们会用到

position：relative；相对定位 position：absolute;绝对定位
border-radius；圆角属性 transform；变换属性
:after :before；伪类选择器

效果图
在这里插入图片描述

接下来直接上源代码

HTML

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

CSS

  <style>
        div{
            position: relative;/*相对定位 约束绝对定位*/
            width: 200px;
            height: 200px;
            margin: 50px auto;
        }
        div::after,
        div::before{
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 160px;
            background-color: red;
            border-radius: 50px 50px 0 0 ;/*css3圆角属性 顺时针*/
        }
        div::after{
            transform: translate(43px) rotate(45deg);/*css3变换属性*/
         }
        div::before{
            transform: rotate(-45deg);
        } 
    </style>

完成