Css ile Çizgi Karakter

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

Ellerinize sağlık, bir zamanlar şöyle bir konu paylaşmıştım, ilginizi çekebilir

https://www.r10.net/showthread.php?t=1374572

Teşekkürler hocam, evet bunu gördüm daha önce. Hoşuma da gitti. Ben can sıkıntısından yapmıştım, paylaşayım dedim. Sizin verdiğiniz çok daha profesyonel. Paylaştığınız için tekrardan teşekkürler.