-
Notifications
You must be signed in to change notification settings - Fork 0
/
07.html
60 lines (60 loc) · 2.01 KB
/
07.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta charset="UTF-8">
<title></title>
<style>
html{
height: 100%;
}
body{
margin: 0;
background: lightcoral;
height: 100%;
background: radial-gradient(ellipse,#f08080 0%,#e83c3c 100%);
}
#kokeshi{
width: 20vw;
height: 26vw;
background: darkcyan;
border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
position: relative;
margin: auto;
top: 50%;
box-shadow: inset 0 -20vw 2vw 0 rgba(255,255,255,0.2),inset 0 -2vw 0 0 rgba(0,0,0,0.2),inset 5vw -13.33333vw 0 0 #006c6c,inset 6.66667vw -13.33333vw 0 0 #e52525,inset -5vw -13.33333vw 0 0 #007c7c,inset -6.66667vw -13.33333vw 0 0 #c01717;
}
#kokeshi:after{
content: "";
position: absolute;
background: beige;
width: 4vw;
height: 2vw;
border-radius: 50%;
top: -3.38983vw;
left: 4vw;
-webkit-backface-visibility: hidden;
z-index: 999;
box-shadow: 9.09091vw 2.85714vw 2vw 0 rgba(220,20,60,0.2),-1vw 2.85714vw 2vw 0 rgba(220,20,60,0.2),8.69565vw 0 0 0 beige,-0.4vw -0.66667vw 0 0 black,9.09091vw -0.66667vw 0 0 black,9.09091vw -1.66667vw 1.33333vw 0.4vw rgba(95,158,160,0.5),-1vw -1.66667vw 1.33333vw 0.4vw rgba(95,158,160,0.5),4.44444vw 1.53846vw 0 0 beige,4.44444vw 1.53846vw 0 0 beige,4.44444vw 2.5vw 0 -0.5vw crimson,16vw -7vw 0 4vw black,-7.8vw -7vw 0 4vw black,4.25532vw -3.63636vw 1vw 6.66667vw beige,4.25532vw -3.63636vw 0 7.84314vw #ededc0,4.25532vw -5vw 0 8vw crimson,4.2vw -12vw 0 10vw black;
}
#kokeshi:before{
content:"";
position: absolute;
width: 23vw;
height: 20vw;
top: -15vw;
left: -1.33333vw;
box-sizing: border-box;
border-top: 10vw solid black;
border-left: 3.33333vw solid black;
border-right: 3.33333vw solid black;
border-bottom: 10vw solid transparent;
border-radius: 40% 40% 40% 40%/80% 80% 80% 80%;
z-index: 9999;
}
</style>
</head>
<body>
<div id="kokeshi"></div>
</body>
</html>