.png)
복습 겸 피카츄를 그려보았다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="reset.css">
<title></title>
<style>
/* 피카츄 색 : #ffe903 */
.pikachu{
position: relative;
top: 100px;
left: 100px;
}
.pikachu-right-ear{
position: absolute;
border: 3px solid black;
border-bottom-width: 10px;
left: 120px;
top: -30px;
width: 70px;
height: 150px;
background: #ffe903;
transform: rotate(-30deg);
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-top-width: 35px;
}
.pikachu-left-ear{
position: absolute;
border: 3px solid black;
border-bottom-width: 10px;
left: 300px;
top: -30px;
width: 70px;
height: 150px;
background: #ffe903;
transform: rotate(30deg);
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-top-width: 35px;
}
.pikachu-face{
position: relative;
border: 3px solid black;
top: 20px;
left: 116px;
width: 250px;
height: 210px;
background: #ffe903;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-left-radius: 40%;
border-bottom-right-radius: 40%;
}
.pikachu-left-delete{
position: absolute;
border: 1px solid #ffe903;
background: #ffe903;
left: 120px;
top: 36px;
transform: rotate(140deg);
width: 69px;
height: 50px;
border-radius: 50%;
z-index: 1;
}
.pikachu-right-delete{
position: absolute;
border: 0.9px solid #ffe903;
background: #ffe903;
left: 301px;
top: 41px;
transform: rotate(-140deg);
width: 71px;
height: 50px;
border-radius: 50%;
z-index: 1;
}
.pikachu-right-eye{
position: absolute;
left: 55px;
top: 80px;
border: 1px solid #000;
border-radius: 50%;
background: #000;
width: 35px;
height: 35px;
}
.pikachu-right-eye-white{
position: absolute;
left: 70px;
top: 85px;
border: 1px solid #fff;
border-radius: 50%;
background: #fff;
width: 15px;
height: 15px;
z-index: 1;
}
.pikachu-left-eye-white{
position: absolute;
left: 170px;
top: 85px;
border: 1px solid #fff;
border-radius: 50%;
background: #fff;
width: 15px;
height: 15px;
z-index: 1;
}
.pikachu-left-eye{
position: absolute;
left: 165px;
top: 80px;
border: 1px solid #000;
border-radius: 50%;
background: #000;
width: 35px;
height: 35px;
}
.pikachu-nose{
position: absolute;
width: 6px;
height: 3px;
top: 130px;
left: 125px;
border: 1px solid black;
border-bottom-right-radius: 5px;
border-top-right-radius: 30%;
border-top-left-radius: 30%;
border-bottom-left-radius: 5px;
background: black;
}
.pikachu-right-etc{
position: absolute;
border: 1px solid black;
background: red;
width: 35px;
height: 35px;
border-radius: 50%;
top:130px;
left: 20px;
}
.pikachu-left-etc{
position: absolute;
border: 1px solid black;
background: red;
width: 35px;
height: 35px;
border-radius: 50%;
top:130px;
left: 190px;
}
.pikachu-mouse-right1{
position: absolute;
width: 3px;
height: 0px;
left: 108px;
top: 150px;
border: 3px solid black;
transform: rotate(50deg);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
background: black;
}
.pikachu-mouse-right2{
position: absolute;
width: 16px;
height: 0px;
left: 111px;
top: 150px;
transform: rotate(-10deg);
border: 3px solid black;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
background: black;
}
.pikachu-mouse-left1{
position: absolute;
width: 3px;
height: 0px;
left: 142px;
top: 150px;
border: 3px solid black;
transform: rotate(-50deg);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
background: black;
}
.pikachu-mouse-left2{
position: absolute;
width: 16px;
height: 0px;
left: 126px;
top: 150px;
transform: rotate(10deg);
border: 3px solid black;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
background: black;
}
</style>
</head>
<body>
<div class="pikachu">
<div class="pikachu-right-ear">
</div>
<div class="pikachu-right-delete"></div>
<div class="pikachu-left-ear">
</div>
<div class="pikachu-left-delete"></div>
<div class="pikachu-face">
<div class="pikachu-right-eye">
</div>
<div class="pikachu-right-eye-white"></div>
<div class="pikachu-left-eye">
</div>
<div class="pikachu-left-eye-white">
</div>
<div class="pikachu-nose">
</div>
<div class="pikachu-right-etc">
</div>
<div class="pikachu-left-etc">
</div>
<div class="pikachu-mouse-right1"></div>
<div class="pikachu-mouse-right2"></div>
<div class="pikachu-mouse-left1"></div>
<div class="pikachu-mouse-left2"></div>
</div>
</div>
</body>
</html>
Prospective Junior Front-end Developer