Uykumun kaçtığı şu saatlerde can sıkıntısından yaptığım şekli paylaşmak istedim
<div id="ortala">
<div id="cizgikarakter">
<div class="solkulak"></div>
<div class="sagkulak"></div>
<div class="kafa"></div>
<div class="sapka"></div>
<div class="sapkaust"></div>
<div class="sapkaalti"></div>
<div class="solgoz">
<div class="gozbebegi"></div>
</div>
<div class="saggoz">
<div class="gozbebegi"></div>
</div>
<div class="burun"></div>
<div class="agiz"></div>
<div class="cizgi1"></div>
<div class="cizgi2"></div>
</div>
</div>
body {
text-align: center;
margin: 0px;
border: 0px;
}
#ortala{text-align: center; margin: 100px 0px 0px 0px;}
#cizgikarakter {
margin: 0px auto;
text-align: center;
width: 200px;
}
.kafa {
width: 200px;
height: 140px;
margin: 0px auto;
background: #fff0c5;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: absolute;
margin: 20px 0px 0px 0px;
}
.sapka {
width: 200px;
height: 100px;
background: #00bbca;
-webkit-border-radius: 200px 200px 0 0;
-moz-border-radius: 200px 200px 0 0;
border-radius: 200px 200px 0 0;
position: absolute;
margin: -20px 0px 0px 0px;
}
.sapkaalti {
width: 200px;
height: 70px;
background: #fff0c5;
-webkit-border-radius: 200px 200px 50px 50px;
-moz-border-radius: 200px 200px 50px 50px;
border-radius: 200px 200px 50px 50px;
position: absolute;
margin: 30px 0px 0px 0px;
border-top: 5px solid #ffe11d;
}
.sapkaust {
width: 10px;
height: 50px;
background: #ffe11d;
-webkit-border-radius: 2px 2px 0px 0px;
-moz-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
position: absolute;
margin: -20px 95px 0px 95px;
}
.solgoz {
width: 40px;
height: 40px;
background: #fff;
-webkit-border-radius: 20px 20px 20px 30px;
-moz-border-radius: 20px 20px 20px 30px;
border-radius: 20px 20px 20px 30px;
position: absolute;
margin: 50px 0px 0px 55px;
border-top: 2px solid #747474;
}
.solgoz .gozbebegi {
width: 5px;
height: 5px;
background: #000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: absolute;
margin: 20px 0px 0px 25px;
}
.saggoz {
width: 40px;
height: 40px;
background: #fff;
-webkit-border-radius: 20px 20px 30px 20px;
-moz-border-radius: 20px 20px 30px 20px;
border-radius: 20px 20px 30px 20px;
position: absolute;
margin: 50px 0px 0px 105px;
border-top: 2px solid #747474;
}
.saggoz .gozbebegi {
width: 5px;
height: 5px;
background: #000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: absolute;
margin: 20px 0px 0px 10px;
}
.burun {
width: 0px;
height: 0px;
border-bottom: 28px solid #d3bb84;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
position: absolute;
margin: 80px 0px 0px 88px;
}
.agiz {
width: 30px;
height: 0px;
border-top: 15px solid #e9ce91;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
position: absolute;
margin: 120px 0px 0px 72px;
transform: rotate(-5deg) ;
-webkit-transform: rotate(-5deg) ;
-moz-transform: rotate(-5deg) ;
-o-transform: rotate(-5deg) ;
-ms-transform: rotate(-5deg) ;
}
.sagkulak {
width: 25px;
height: 50px;
position: absolute;
background: #e5d3a2;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
margin: 60px 0px 0px 179px;
transform: rotate(-25deg) ;
-webkit-transform: rotate(-25deg) ;
-moz-transform: rotate(-25deg) ;
-o-transform: rotate(-25deg) ;
-ms-transform: rotate(-25deg) ;
}
.solkulak {
width: 25px;
height: 50px;
position: absolute;
background: #e5d3a2;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
margin: 60px 0px 0px -4px;
transform: rotate(25deg) ;
-webkit-transform: rotate(25deg) ;
-moz-transform: rotate(25deg) ;
-o-transform: rotate(25deg) ;
-ms-transform: rotate(25deg) ;
}
.cizgi1
{
width: 1px;
height: 40px;
background: #ebddb6;
position: absolute;
transform: rotate(-40deg) ;
-webkit-transform: rotate(-40deg) ;
-moz-transform: rotate(-40deg) ;
-o-transform: rotate(-40deg) ;
-ms-transform: rotate(-40deg) ;
margin: 100px 0px 0px 20px;
}
.cizgi2
{
width: 1px;
height: 30px;
background: #ebddb6;
position: absolute;
transform: rotate(-40deg) ;
-webkit-transform: rotate(-40deg) ;
-moz-transform: rotate(-40deg) ;
-o-transform: rotate(-40deg) ;
-ms-transform: rotate(-40deg) ;
margin: 105px 0px 0px 25px;
}Zamanla geliştirdiğim zaman burdan paylaşacağım