网站首页 > 技术文章正文

css 绘制心形 css版心

hmc789 2024-11-14 16:34:53 技术文章 2 ℃

运行效果

技术要点

相对定位 position: relative; 是以自身元素作为参考目标进行移动的，原有位置是保存的，俗称不脱标。
绝对定位，position: absolute;是以有定位的最近的父元素为参考目标进行移动，如果父元素没有定位就寻找父元素的父元素，直到找到最近的为止，如果都找不到，则以浏览器为参考目标进行移动，绝对定位是不占有原有位置，俗称脱标。
伪元素选择器

::before 元素的开始位置，在指定的选择器之前插入一段内容。插入的内容默认为“行内元素”，可以通过“display”强制转换显示类型，必须要结合content使用

::after元素的结束位置，在指定的选择器之后插入一段内容，使用方式和“:before”一样。插入的内容默认也是为“行内元素”，同样可以通过“display”强制转换显示类型，必须要结合content使用

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画心形</title>
    <style type="text/css">

        .heart{
            width: 100px;
            height: 90px;
            position: relative;
            margin: 100px auto;
        }

        .heart::before{
            content: '';
            position: absolute;
            width: 50px;
            height: 80px;
            background-color: red;
            border-radius: 50px 40px 0px 0px;
            transform-origin: 0 100%;
            transform: rotate(-45deg);
            left: 50px;
        }

        .heart::after{
            content: '';
            position: absolute;
            width: 50px;
            height: 80px;
            background-color: red;
            border-radius: 50px 40px 0px 0px;
            transform-origin: 100% 100%;
            transform: rotate(45deg);
        }

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

上一篇： CSS 函数那些事(二)你不知道的 attr()
下一篇： CSS学习之权重 css权重的计算方式

网站首页 > 技术文章 正文

css 绘制心形 css版心

运行效果

技术要点

源代码

猜你喜欢

网站首页 > 技术文章正文