画像を使わずにCSS3だけで描いた将棋の駒

HTMLとCSS3を使って将棋の駒を描いてみました。

プレビュー

↓別ウィンドウを開いて見る

コード

HTML

<div id="wrapper">
    <div id="ou">
        <div class="kaku1"></div>
        <div class="kaku2"></div>
        <div class="kaku3"></div>
        <div class="kaku4"></div>
    </div>
    <div id="shou">
        <div class="kaku1"></div>
        <div class="kaku2"></div>
        <div class="kaku3"></div>
        <div class="kaku4"></div>
        <div class="kaku5"></div>
        <div class="kaku6"></div>
        <div class="kaku7"></div>
        <div class="kaku8"></div>
        <div class="kaku9"></div>
        <div class="kaku10"></div>
    </div>
    
    <div class="inner"></div>
    <div class="inner left"></div>

    <div class="inner left cover"></div>    
</div>

CSS

#wrapper {
     position: relative;
     width: 340px;
     margin: 10px auto 30px;
}
#ou {
    position: absolute; 
    z-index: 1;
    top: -30px;
}
    
#ou div,  #ou div:after {
    position: absolute;
    background: #000;
}    

#ou .kaku1 {
    width: 90px;
    height: 30px;        
    top: 72px;
    left: 80px;
}
#ou .kaku1:after {
    content: '';        
    left: 85px;
    top: 0;
    height: 30px;        
    width: 90px;
}
    
#ou .kaku2 {
    width: 30px;
    height: 120px;
    top: 100px;
    left: 155px;
}

#ou .kaku3 {
    width: 90px;
    height: 30px;        
    top: 130px;
    left: 80px;
}
#ou .kaku3:after {
    content: '';        
    left: 85px;
    top: 0;
    height: 30px;        
    width: 90px;
}
 
#ou .kaku4 {	
    width: 90px;
    height: 30px;
    top: 190px;
    left: 80px;
}
    
#ou .kaku4:after {
    content: '';        
    left: 85px;
    top: 0;
    height: 30px;        
    width: 90px;       
}

#shou {
    position: absolute; 
    z-index: 1;
    top: 200px;
}
    
#shou div,  #shou div:after {
    position: absolute;
    background: #000;
}    
#shou .kaku1 {
    width: 30px;
    height: 160px;        
    top: 10px;
    left: 80px;
}
#shou .kaku2 {
    width: 30px;
    height: 60px;        
    top: 20px;
    left: 40px;
    -webkit-transform: skew(15deg);
    -moz-transform: skew(15deg);
    -o-transform: skew(15deg);
    -ms-transform: skew(15deg);
    transform: skew(15deg);		
}
#shou .kaku3 {
    width: 40px;
    height: 60px;        
    top: 100px;
    left: 55px;
    -webkit-transform: skew(-40deg);
    -moz-transform: skew(-40deg);
    -o-transform: skew(-40deg);
    -ms-transform: skew(-40deg);
    transform: skew(-40deg);		
}
#shou .kaku4 {
   width: 125px;
    height: 30px;        
    top: 0;
    left: 130px;	
}
#shou .kaku5 {
    width: 30px;
    height: 40px;        
    top: 35px;
    left: 130px;
    -webkit-transform: skew(15deg);
    -moz-transform: skew(15deg);
    -o-transform: skew(15deg);
    -ms-transform: skew(15deg);
    transform: skew(15deg);		
}
#shou .kaku6 {
    width: 30px;
    height: 40px;        
    top: 35px;
    left: 170px;
    -webkit-transform: skew(15deg);
    -moz-transform: skew(15deg);
    -o-transform: skew(15deg);
    -ms-transform: skew(15deg);
    transform: skew(15deg);		
}
#shou .kaku7 {
    width: 40px;
    height: 60px;        
    top: 35px;
    left: 220px;
    -webkit-transform: skew(-40deg);
    -moz-transform: skew(-40deg);
    -o-transform: skew(-40deg);
    -ms-transform: skew(-40deg);
    transform: skew(-40deg);		
}
#shou .kaku8 {
   width: 160px;
    height: 30px;        
    top: 100px;
    left: 130px;	
}
#shou .kaku9 {
    width: 30px;
    height: 90px;        
    top: 90px;
    left: 230px;	
}
#shou .kaku9:after {
    content: '';        
    width: 30px;
    height: 40px;        
    top: 50px;
    left: -25px;
    -webkit-transform: skew(50deg);
    -moz-transform: skew(50deg);
    -o-transform: skew(50deg);
    -ms-transform: skew(50deg);
    transform: skew(50deg);		
}
#shou .kaku10 {
    width: 30px;
    height: 30px;        
    top: 140px;
    left: 150px;
    -webkit-transform: skew(40deg);
    -moz-transform: skew(40deg);
    -o-transform: skew(40deg);
    -ms-transform: skew(40deg);
    transform: skew(40deg);		
}



#wrapper:before {
     content: '';
     display: block;
     /*280 total width */        
     border-left: 140px solid transparent;
     border-right: 140px solid transparent;
     border-bottom: 40px solid #F7D37B;
     width: 0;
     margin-left: 30px;
}


#wrapper:after {
    content: '';
    display: block;
    /*340 total width */
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 345px solid #F7D37B;
    width: 280px; 
 }    

.inner {
    position: absolute;
    top: 0;
        
    -moz-transform: scale(0.85);
    -webkit-transform: scale(0.85);
    -o-transform: scale(0.85);
    -ms-transform: scale(0.85);	
    transform: scale(0.85);	
}

.inner:before {
     content: '';
     display: block;
     /*340 total width */
      border-left: 140px solid transparent;
     border-right: 140px solid transparent;
     border-bottom: 40px solid #F7D37B;
     width: 0;
     margin-left: 30px;
}
    
.inner:after {
     content: '';
     display: block;
     /*280 total width */        
     border-left: 30px solid transparent;
     border-right: 30px solid transparent;
     border-bottom: 345px solid #F7D37B;
     width: 280px;
        
     position: relative;
     top: -1px; /* Fix spacing */
}
    
.inner.left {
     width: 170px; /* half from the 340px total width */
     overflow: hidden;
     -moz-transform: scale(1);
     -webkit-transform: scale(1);
     -o-transform: scale(1);
    -ms-transform: scale(1);
	transform: scale(1);
}
.inner.left:before {
     border-top-color: #e34c26;
}
    
.inner.left:after {
    border-top-color: #e34c26;
}    

.inner.left.cover {
    z-index: 10000;
    opacity: 0.1;
}