css画冰棍儿

作者: _Dot912 | 来源:发表于2017-07-19 21:16 被阅读0次

css画冰棍儿
卖冰棍儿喽~~~【冰棍儿】的英文你会说么
冰棍儿往事
【总结】2016.12.19
【转】用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>