css畫冰棍兒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>icecream</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #afeeee;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .icecream {
            position: relative;
            height: 900px;
            width: 600px;
        }

        .top {
            position: absolute;
            border: 3px solid transparent;
            width: 300px;
            transform: translateX(-50%);
            border-radius: 50% 50% 0 10%/40% 40% 0 8%;
        }

        .top-out {
            border-left: 15px solid #ff38b4;
            background: #ff69b4;
            height: 450px;
            top: 100px;
            left: 50%;
            z-index: 3;
        }

        .top-in {
            background: #fe99ef;
            height: 455px;
            top: 95px;
            left: 55%;
            z-index: 1;
            border-bottom-right-radius: 10% 8%;
        }

        .middle {
            position: absolute;
            background: white;
            border: 3px solid transparent;
            height: 50px;
            width: 335px;
            top: 525px;
            left: 52%;
            transform: translateX(-50%);
            border-bottom-left-radius: 10% 70%;
            border-bottom-right-radius: 10% 70%;
        }

        .bottom {
            position: absolute;
            background: #f4a460;
            height: 200px;
            width: 50px;
            top: 570px;
            left: 51%;
            transform: translateX(-50%);
            border-bottom-left-radius: 50% 10%;
            border-bottom-right-radius: 50% 10%;
            border-bottom: 30px solid #cd853f;
            border-top: 30px solid #cd853f;
            z-index: 2;
        }

        .shadow {
            position: absolute;
            background: #ff38b4;
            height: 250px;
            width: 30px;
            top: 220px;
            border: 10px solid transparent;
            z-index: 3;
            border-radius: 50%/10%;
        }

        .shadow1 {
            left: 40%;
        }

        .shadow2 {
            right: 38%;
        }
    </style>
</head>

<body>
    <div class="icecream">
        <div class="top top-out"></div>
        <div class="top top-in"></div>
        <div class="middle"></div>
        <div class="bottom"></div>
        <div class="shadow shadow1"></div>
        <div class="shadow shadow2"></div>
    </div>
</body>

</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容