css画冰棍儿
2017-07-19 本文已影响0人
_Dot912
<!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>
