使用html画爱心

最新推荐文章于 2025-03-16 15:09:47 发布

转载最新推荐文章于 2025-03-16 15:09:47 发布 · 4k 阅读

11 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhangzonghua/p/8428862.html

本文详细介绍了如何使用CSS3的transform属性和border-radius来创建一个心形图案。通过定位和旋转两个红色的div元素，形成了一个浪漫的心形，展示了CSS3在形状创建方面的强大能力。

<!DOCTYPE html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>网页</title>
    <style type="text/css">
        /*存放元素的区域*/
        html,body{
                    height:100%;
                }
        .content{/*存放元素的区域*/
        position:relative;
        width:200px;
        height:200px;
        background-color: #368;
        
        
        margin:auto;
        
        }
        
        .love{
        position:relative;
            width:200px;
            height:180px;
            background: silver;
        }
        
        .love .left{
        position:absolute;
        left:32px;
            width:100px;
            height:150px;
            background: red;
            border-radius:50px 50px 0 0;
            /* 对应的长度 得出弧度*/
            transform:rotate(-45deg);/*css3 形变,逆时针旋转45度*/
            
        }
            
            .love .right{
        position:absolute;
        left:68px;
            width:100px;
            height:150px;
            background: red;
            border-radius:50px 50px 0 0;
            /* 对应的长度 得出弧度*/
            transform:rotate(45deg);/*css3 形变,逆时针旋转45度*/    
        }
        .love .left,.love .right{
        
        }
        
    </style>
</head>
<body>
    <!--  -->
        <div class='content'>
            <div class='love'>
                <div class='left'></div>
                <div class='right'></div>
            </div>
        </div>
        
        
        
</body>
</html>

转载于:https://www.cnblogs.com/zhangzonghua/p/8428862.html