用css里的定位，旋转制作一个简单的爱心

LMZ0306KB0824

于 2023-03-28 20:44:52 发布

阅读量132

点赞数 1

CC 4.0 BY-SA版权

文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/KB0824liu/article/details/129824631

<style>
       .wrapper{
        width: 500px;
        height: 500px;
        position: absolute;
       }
       .first{
        width: 300px;
        height: 300px;
        background-color:red;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50%;
       }
       .second{
        width: 300px;
        height: 300px;
        background-color:red;
        position: absolute;
        top: 0;
        right: 0;
        border-radius: 50%;
       }
       .thrid{
        width: 300px;
        height: 300px;
        background-color:red;
        transform: translate(100px,100px) rotate(45deg);
       }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="first"></div>
        <div class="second"></div>
        <div class="thrid"></div>
   
    </div>