用css3 绘制心形图案

闲来无聊，做做CSS3
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .heart {
        	margin: 100px auto;
            width: 160px;
            height: 200px;
            position: relative;
            /* relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级 */
        }

        /* after 伪元素在元素之前添加内容*/
        .heart:before {
            content: " ";
            border-radius: 100px 100px 0 0;
            /* 正方形的内切圆的半径等于正方形边长的一半 */
            width: 80px;
            height: 120px;
            /* 长方形 */
            background: #669;
            -moz-transform: rotate(-45deg);
            /* 逆时针旋转45°*/
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            position: absolute;
            /* absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位 */
            left: 20px;
        }

        /* after 伪元素在元素之后添加内容*/
        .heart:after {
            content: " ";
            width: 80px;
            height: 120px;
            background: #669;
            border-radius: 100px 100px 0 0;
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            position: absolute;
            left: 48px;
            top: 0px;
        }
    </style>
</head>

<body>
    <div class="heart"></div>
</body>

</html>
效果图：
在这里插入图片描述
用css3 绘制心形图案

猜你喜欢
