CSSで似顔絵描いてみた
このようなピョコタン先生の似顔絵をCSSで作ったのでコードを紹介します。
目のボックスにoverflow:hiddenを指定すれば自然な黒目を作れることに気が付いた。 pic.twitter.com/rz1FWngKmr
— こんた (@kontakuto33) 2018年6月3日
<html>
<head>
<style>
.content{
position:relative;
width:600px;
height:600px;
border:solid 1px black;
}
.hair{
position:absolute;
width:470px;
height:400px;
background-color: black;
border-radius: 50%;
bottom: 130px;
right:65px;
z-index:1;
}
.face:before{
content:"";
position:absolute;
border:solid 1px black;
background-color: black;
width:100%;
height:30%;
left:0px;
bottom:70%;
border-radius: 50% 50% 0% 0%/100% 100% 0% 0%;
border: solid 1px black;
}
.righteye{
position:absolute;
overflow:hidden;
border-radius:50% 50% 70% 30%/90% 70% 30% 10%;
transform:rotate(5deg);
border:solid 1px black;
width:25%;
height:30px;
left:65%;
top:50%;
}
.lefteye{
position:absolute;
border-radius:50% 50% 30% 70%/70% 90% 10% 30%;
transform:rotate(-5deg);
border:solid 1px black;
width:25%;
height:30px;
left:10%;
top:50%;
overflow: hidden;
}
.kurome{
position:absolute;
width:40%;
height:120%;
left:30%;
top:-30%;
background-color:black;
border-radius:50%;
}
.face{
position:absolute;
background-color: white;
bottom:100px;
right:100px;
width:400px;
height:400px;
border:solid 1px black;
border-radius:50% 50% 50% 50%/50% 50% 50% 50%;
z-index:2;
}
.nose{
margin:0px;
padding:0px;
position:absolute;
width:25%;
height:25%;
border:solid 1px black;
border-radius: 50%;
left:37%;
top:60%;
}
.nose:before{
margin:0px;
padding:0px;
content:"";
position:absolute;
width:100%;
height:35%;
top:-1px;
right:0px;
background-color: white;
}
.nose:after{
content:"";
position:absolute;
width:100%;
height:35%;
bottom:-1px;
right:0px;
background-color: white;
}
.lefthole{
position:absolute;
width:20%;
height:20%;
left:10%;
bottom:35%;
background-color: black;
border-radius: 50%;
}
.righthole{
position:absolute;
width:20%;
height:20%;
right:10%;
bottom:35%;
background-color: black;
border-radius: 50%;
}
.mouth{
position: absolute;
width:40%;
height:5%;
left:30%;
top:85%;
border-radius: 50%;
border:solid 1px black;
}
.mouth:after{
content:"";
background-color: white;
position: absolute;
width: 100%;
height:52%;
top:50%;
left:0%;
}
.leftbrow{
position: absolute;
width: 25%;
height: 5%;
left:10%;
top:40%;
border-radius: 50% 50% 50% 50%/80% 60% 40% 20%;
border:solid 5px black;
}
.leftbrow:after{
content:"";
position: absolute;
width: 110%;
height: 70%;
left:-5%;
top:60%;
background-color: white;
transform: rotate(-3deg);
}
.rightbrow{
position: absolute;
width: 25%;
height: 5%;
right:10%;
top:40%;
border-radius: 50% 50% 50% 50%/60% 80% 20% 40%;
border:solid 5px black;
}
.rightbrow:after{
content:"";
position: absolute;
width: 110%;
height: 70%;
right:-5%;
top:60%;
background-color: white;
transform: rotate(3deg);
}
</style>
</head>
<body>
<div class="content">
<div class="face">
<div class="leftbrow">
</div>
<div class="rightbrow">
</div>
<div class="lefteye">
<div class="kurome">
</div>
</div>
<div class="righteye">
<div class="kurome">
</div>
</div>
<div class="nose">
<div class="lefthole">
</div>
<div class="righthole">
</div>
</div>
<div class="mouth">
</div>
</div>
<div class="hair">
</div>
</div>
</body>
</html>黒目のサイズとか色を動的に変えれるのでどっかで使えるかもしれない。
