5分钟Html 画个心

原理：两个div，一个左旋转 一个右旋转或左旋转后镜像，分别圆角一半

<html>
    <head>
        <meta charset="UTF-8">
        <title>红心</title>
        <style type="text/css">
            *{
                padding: 0px;
                margin: 0px;
            }
            .box{
                position:relative;
                width: 200px;
                height: 300px;
                background-color: #fff;
                margin: 100px auto;
            }
            .uai,.hh{
                position: absolute;
                left: 0px;
                top: 0px;
                width: 200px;
                height: 300px;
                background-color:red;
                border-radius:100px 100px 0 0; 
                transform: rotate(-45deg);
                color: white;
                line-height: 100px;
                text-align: center;
                font-size:30px;
            }
            .hh{
                transform: rotate(45deg) translateX(50px) translateY(-50px);
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="uai">Uai</div>
            <div class="hh">HH</div>
        </div>
    </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容