css再來一顆紅心

如圖:在這裏插入圖片描述

代碼:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .heart {
                position: relative;
                margin: 50px auto;
                width: 120px;
            }

            .heart::after,
            .heart::before {
                content: "";
                width: 70px;
                height: 115px;
                position: absolute;
                background: red;
                left: 70px;
                top: 0;
                border-radius: 50px 50px 0 0;
                transform: rotate(-45deg);
                transform-origin: 0 100%;
            }

            .heart::after {
                left: 0;
                transform-origin: 100% 100%;
                transform: rotate(45deg);
            }

        </style>
    </head>

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

</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章