Last active
August 29, 2015 14:11
-
-
Save yusugomori/63ef6252f10fdd0f76a6 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.A { | |
position: relative; | |
left: 30px; | |
width: 60px; | |
height: 91px; | |
border-bottom: solid 14px #000000; | |
} | |
.A:before { | |
-webkit-transform: skew(-19deg, 0); | |
-moz-transform: skew(-19deg, 0); | |
-ms-transform: skew(-19deg, 0); | |
-o-transform: skew(-19deg, 0); | |
transform: skew(-19deg, 0); | |
position: absolute; | |
content: ''; | |
top: 12.5px; | |
left: 0; | |
width: 16px; | |
height: 125px; | |
background-color: #000000; | |
} | |
.A:after { | |
-webkit-transform: skew(19deg, 0); | |
-moz-transform: skew(19deg, 0); | |
-ms-transform: skew(19deg, 0); | |
-o-transform: skew(19deg, 0); | |
transform: skew(19deg, 0); | |
position: absolute; | |
content: ''; | |
top: 12.5px; | |
left: 45px; | |
width: 16px; | |
height: 125px; | |
background-color: #000000; | |
} | |
.B { | |
position: relative; | |
top: 12.5px; | |
left: 10px; | |
width: 60px; | |
height: 125px; | |
border-left: solid 16px #000000; | |
} | |
.B:before { | |
position: absolute; | |
content: ''; | |
width: 52px; | |
height: 39px; | |
border-width: 15px 15px 10px 0; | |
border-color: #000000; | |
border-style: solid; | |
-webkit-border-radius: 0 240% 180% 0 / 0 180% 180% 0; | |
-moz-border-radius: 0 240% 180% 0 / 0 180% 180% 0; | |
-ms-border-radius: 0 240% 180% 0 / 0 180% 180% 0; | |
-o-border-radius: 0 240% 180% 0 / 0 180% 180% 0; | |
border-radius: 0 240% 180% 0 / 0 180% 180% 0; | |
} | |
.B:after { | |
position: absolute; | |
content: ''; | |
bottom: 0; | |
width: 58px; | |
height: 43px; | |
border-width: 10px 15px 15px 0; | |
border-color: #000000; | |
border-style: solid; | |
-webkit-border-radius: 0 180% 220% 0 / 0 180% 180% 0; | |
-moz-border-radius: 0 180% 220% 0 / 0 180% 180% 0; | |
-ms-border-radius: 0 180% 220% 0 / 0 180% 180% 0; | |
-o-border-radius: 0 180% 220% 0 / 0 180% 180% 0; | |
border-radius: 0 180% 220% 0 / 0 180% 180% 0; | |
} | |
.C { | |
position: relative; | |
top: 12.5px; | |
left: 10px; | |
width: 84px; | |
height: 95px; | |
border-width: 15px 12px 15px 16px; | |
border-color: #000000; | |
border-style: solid; | |
-webkit-border-radius: 50%; | |
-moz-border-radius: 50%; | |
-ms-border-radius: 50%; | |
-o-border-radius: 50%; | |
border-radius: 50%; | |
} | |
.C:before { | |
-webkit-transform: rotate(45deg); | |
-moz-transform: rotate(45deg); | |
-ms-transform: rotate(45deg); | |
-o-transform: rotate(45deg); | |
transform: rotate(45deg); | |
position: absolute; | |
content: ''; | |
top: 2px; | |
left: 49px; | |
background-color: #ffffff; | |
width: 90px; | |
height: 90px; | |
} | |
.D { | |
position: relative; | |
top: 12.5px; | |
left: 10px; | |
border-left: solid 15px #000000; | |
height: 125px; | |
} | |
.D:before { | |
position: absolute; | |
content: ''; | |
top: 0; | |
left: 0; | |
width: 60px; | |
height: 95px; | |
border-width: 15px 15px 15px 0; | |
border-color: #000000; | |
border-style: solid; | |
-webkit-border-radius: 0 300% 300% 0 / 0 180% 180% 0; | |
-moz-border-radius: 0 300% 300% 0 / 0 180% 180% 0; | |
-ms-border-radius: 0 300% 300% 0 / 0 180% 180% 0; | |
-o-border-radius: 0 300% 300% 0 / 0 180% 180% 0; | |
border-radius: 0 300% 300% 0 / 0 180% 180% 0; | |
} | |
.E { | |
position: relative; | |
top: 12.5px; | |
left: 10px; | |
width: 63px; | |
height: 95px; | |
border-width: 15px 0 15px 16px; | |
border-color: #000000; | |
border-style: solid; | |
} | |
.E:before { | |
position: absolute; | |
content: ''; | |
top: 38px; | |
left: 0px; | |
width: 53px; | |
height: 15px; | |
background-color: #000000; | |
} | |
.F { | |
position: relative; | |
top: 12.5px; | |
left: 10px; | |
width: 63px; | |
height: 110px; | |
border-width: 15px 0 0 16px; | |
border-color: #000000; | |
border-style: solid; | |
} | |
.F:before { | |
position: absolute; | |
content: ''; | |
top: 38px; | |
left: 0px; | |
width: 53px; | |
height: 15px; | |
background-color: #000000; | |
} | |
.G { | |
position: relative; | |
top: 12.5px; | |
left: 10px; | |
width: 84px; | |
height: 95px; | |
border-width: 15px 12px 15px 16px; | |
border-color: #000000; | |
border-style: solid; | |
-webkit-border-radius: 50%; | |
-moz-border-radius: 50%; | |
-ms-border-radius: 50%; | |
-o-border-radius: 50%; | |
border-radius: 50%; | |
} | |
.G:before { | |
-webkit-transform: rotate(45deg); | |
-moz-transform: rotate(45deg); | |
-ms-transform: rotate(45deg); | |
-o-transform: rotate(45deg); | |
transform: rotate(45deg); | |
position: absolute; | |
content: ''; | |
top: 2px; | |
left: 48px; | |
background-color: #ffffff; | |
width: 90px; | |
height: 90px; | |
} | |
.G:after { | |
position: absolute; | |
content: ''; | |
bottom: 0.5px; | |
right: 7px; | |
width: 28px; | |
height: 36px; | |
border-width: 13px 14px 0 0; | |
border-color: #000000; | |
border-style: solid; | |
} | |
.H { | |
position: relative; | |
top: 12.5px; | |
left: 10px; | |
width: 60px; | |
height: 125px; | |
border-width: 0 16px 0 16px; | |
border-color: #000000; | |
border-style: solid; | |
} | |
.H:before { | |
position: absolute; | |
content: ''; | |
top: 53px; | |
left: 0; | |
width: 60px; | |
height: 14px; | |
background-color: #000000; | |
} | |
.I { | |
z-index: 1; | |
position: relative; | |
top: 12.5px; | |
left: 20px; | |
width: 16px; | |
height: 125px; | |
background-color: #000000; | |
} | |
.J { | |
position: relative; | |
top: 12.5px; | |
left: -5px; | |
width: 75px; | |
height: 66px; | |
border-right: solid 16px #000000; | |
} | |
.J:before { | |
position: absolute; | |
content: ''; | |
bottom: -60px; | |
right: -16px; | |
width: 50px; | |
height: 60px; | |
border-width: 0 16px 15px 14px; | |
border-color: #000000; | |
border-style: solid; | |
-webkit-border-radius: 0 0 75% 75%; | |
-moz-border-radius: 0 0 75% 75%; | |
-ms-border-radius: 0 0 75% 75%; | |
-o-border-radius: 0 0 75% 75%; | |
border-radius: 0 0 75% 75%; | |
} | |
.J:after { | |
-webkit-transform: rotate(-40deg); | |
-moz-transform: rotate(-40deg); | |
-ms-transform: rotate(-40deg); | |
-o-transform: rotate(-40deg); | |
transform: rotate(-40deg); | |
position: absolute; | |
content: ''; | |
top: 40px; | |
left: -20px; | |
width: 60px; | |
height: 60px; | |
background-color: #ffffff; | |
} | |
.K { | |
position: relative; | |
top: 12.5px; | |
left: 10px; | |
width: 80px; | |
height: 125px; | |
border-left: solid 16px #000000; | |
overflow: hidden; | |
} | |
.K:before { | |
-webkit-transform: skew(-43deg, 0); | |
-moz-transform: skew(-43deg, 0); | |
-ms-transform: skew(-43deg, 0); | |
-o-transform: skew(-43deg, 0); | |
transform: skew(-43deg, 0); | |
position: absolute; | |
content: ''; | |
top: 0; | |
left: 16px; | |
width: 19px; | |
height: 84px; | |
background-color: #000000; | |
} | |
.K:after { | |
-webkit-transform: skew(30deg, 0); | |
-moz-transform: skew(30deg, 0); | |
-ms-transform: skew(30deg, 0); | |
-o-transform: skew(30deg, 0); | |
transform: skew(30deg, 0); | |
position: absolute; | |
content: ''; | |
bottom: 0; | |
right: 25px; | |
width: 18px; | |
height: 80px; | |
background-color: #000000; | |
} | |
.L { | |
position: relative; | |
top: 12.5px; | |
left: 10px; | |
width: 63px; | |
height: 110px; | |
border-width: 0 0 15px 16px; | |
border-color: #000000; | |
border-style: solid; | |
} | |
.M { | |
position: relative; | |
top: 12.5px; | |
left: 10px; | |
width: 80px; | |
height: 125px; | |
border-width: 0 15px 0 15px; | |
border-color: #000000; | |
border-style: solid; | |
} | |
.M:before { | |
-webkit-transform: skew(20deg, 0); | |
-moz-transform: skew(20deg, 0); | |
-ms-transform: skew(20deg, 0); | |
-o-transform: skew(20deg, 0); | |
transform: skew(20deg, 0); | |
position: absolute; | |
content: ''; | |
top: 0; | |
left: 14px; | |
width: 12px; | |
height: 110px; | |
background-color: #000000; | |
} | |
.M:after { | |
-webkit-transform: skew(-20deg, 0); | |
-moz-transform: skew(-20deg, 0); | |
-ms-transform: skew(-20deg, 0); | |
-o-transform: skew(-20deg, 0); | |
transform: skew(-20deg, 0); | |
position: absolute; | |
content: ''; | |
top: 0; | |
right: 14px; | |
width: 12px; | |
height: 110px; | |
background-color: #000000; | |
} | |
.N { | |
position: relative; | |
top: 12.5px; | |
left: 10px; | |
width: 63px; | |
height: 125px; | |
border-width: 0 15px 0 15px; | |
border-color: #000000; | |
border-style: solid; | |
} | |
.N:before { | |
-webkit-transform: skew(30deg, 0); | |
-moz-transform: skew(30deg, 0); | |
-ms-transform: skew(30deg, 0); | |
-o-transform: skew(30deg, 0); | |
transform: skew(30deg, 0); | |
position: absolute; | |
content: ''; | |
top: 0; | |
left: 24px; | |
width: 15px; | |
height: 125px; | |
background-color: #000000; | |
} | |
.O { | |
position: relative; | |
top: 12.5px; | |
left: 10px; | |
width: 70px; | |
height: 97px; | |
border-width: 14px 16px 14px 16px; | |
border-color: #000000; | |
border-style: solid; | |
-webkit-border-radius: 55% / 52%; | |
-moz-border-radius: 55% / 52%; | |
-ms-border-radius: 55% / 52%; | |
-o-border-radius: 55% / 52%; | |
border-radius: 55% / 52%; | |
} | |
.P { | |
position: relative; | |
top: 12.5px; | |
left: 10px; | |
width: 60px; | |
height: 125px; | |
border-left: solid 16px #000000; | |
} | |
.P:before { | |
position: absolute; | |
content: ''; | |
width: 56px; | |
height: 50px; | |
border-width: 13px 15px 13px 0; | |
border-color: #000000; | |
border-style: solid; | |
-webkit-border-radius: 0 220% 220% 0 / 0 180% 180% 0; | |
-moz-border-radius: 0 220% 220% 0 / 0 180% 180% 0; | |
-ms-border-radius: 0 220% 220% 0 / 0 180% 180% 0; | |
-o-border-radius: 0 220% 220% 0 / 0 180% 180% 0; | |
border-radius: 0 220% 220% 0 / 0 180% 180% 0; | |
} | |
.Q { | |
z-index: -1; | |
position: relative; | |
top: 12.5px; | |
left: 10px; | |
width: 70px; | |
height: 97px; | |
border-width: 14px 16px 14px 16px; | |
border-color: #000000; | |
border-style: solid; | |
-webkit-border-radius: 55% / 52%; | |
-moz-border-radius: 55% / 52%; | |
-ms-border-radius: 55% / 52%; | |
-o-border-radius: 55% / 52%; | |
border-radius: 55% / 52%; | |
} | |
.Q:before { | |
-webkit-transform: rotate(-84deg); | |
-moz-transform: rotate(-84deg); | |
-ms-transform: rotate(-84deg); | |
-o-transform: rotate(-84deg); | |
transform: rotate(-84deg); | |
position: absolute; | |
content: ''; | |
top: 82px; | |
left: 49px; | |
width: 16px; | |
height: 48px; | |
border-width: 16px 0 13px 13px; | |
border-color: #000000; | |
border-style: solid; | |
-webkit-border-radius: 200% 0 0 200% / 100% 0 0 100%; | |
-moz-border-radius: 200% 0 0 200% / 100% 0 0 100%; | |
-ms-border-radius: 200% 0 0 200% / 100% 0 0 100%; | |
-o-border-radius: 200% 0 0 200% / 100% 0 0 100%; | |
border-radius: 200% 0 0 200% / 100% 0 0 100%; | |
} | |
.Q:after { | |
-webkit-transform: rotate(-18deg); | |
-moz-transform: rotate(-18deg); | |
-ms-transform: rotate(-18deg); | |
-o-transform: rotate(-18deg); | |
transform: rotate(-18deg); | |
position: absolute; | |
content: ''; | |
bottom: -35px; | |
right: -44px; | |
width: 30px; | |
height: 30px; | |
background-color: #ffffff; | |
} | |
.R { | |
position: relative; | |
top: 12.5px; | |
left: 10px; | |
width: 60px; | |
height: 125px; | |
border-left: solid 16px #000000; | |
} | |
.R:before { | |
position: absolute; | |
content: ''; | |
width: 52px; | |
height: 44px; | |
border-width: 13px 15px 13px 0; | |
border-color: #000000; | |
border-style: solid; | |
-webkit-border-radius: 0 220% 220% 0 / 0 180% 180% 0; | |
-moz-border-radius: 0 220% 220% 0 / 0 180% 180% 0; | |
-ms-border-radius: 0 220% 220% 0 / 0 180% 180% 0; | |
-o-border-radius: 0 220% 220% 0 / 0 180% 180% 0; | |
border-radius: 0 220% 220% 0 / 0 180% 180% 0; | |
} | |
.R:after { | |
-webkit-transform: skew(32deg, 0); | |
-moz-transform: skew(32deg, 0); | |
-ms-transform: skew(32deg, 0); | |
-o-transform: skew(32deg, 0); | |
transform: skew(32deg, 0); | |
position: absolute; | |
content: ''; | |
bottom: 0; | |
left: 38px; | |
width: 18px; | |
height: 58px; | |
background-color: #000000; | |
} | |
.S { | |
-webkit-transform: rotate(14deg); | |
-moz-transform: rotate(14deg); | |
-ms-transform: rotate(14deg); | |
-o-transform: rotate(14deg); | |
transform: rotate(14deg); | |
position: relative; | |
width: 105px; | |
height: 150px; | |
top: 10px; | |
left: 10px; | |
} | |
.S:before { | |
-webkit-transform: rotate(18deg); | |
-moz-transform: rotate(18deg); | |
-ms-transform: rotate(18deg); | |
-o-transform: rotate(18deg); | |
transform: rotate(18deg); | |
position: absolute; | |
content: ''; | |
width: 44px; | |
height: 40px; | |
border-width: 14px 0 15px 15.5px; | |
border-color: #000000; | |
border-style: solid; | |
-webkit-border-radius: 220% 0 0 150% / 150% 0 0 100%; | |
-moz-border-radius: 220% 0 0 150% / 150% 0 0 100%; | |
-ms-border-radius: 220% 0 0 150% / 150% 0 0 100%; | |
-o-border-radius: 220% 0 0 150% / 150% 0 0 100%; | |
border-radius: 220% 0 0 150% / 150% 0 0 100%; | |
} | |
.S:after { | |
-webkit-transform: rotate(198deg); | |
-moz-transform: rotate(198deg); | |
-ms-transform: rotate(198deg); | |
-o-transform: rotate(198deg); | |
transform: rotate(198deg); | |
position: absolute; | |
content: ''; | |
top: 65px; | |
left: 21px; | |
width: 52px; | |
height: 44px; | |
border-width: 14px 0 15px 15px; | |
border-color: #000000; | |
border-style: solid; | |
-webkit-border-radius: 240% 0 0 110% / 140% 0 0 100%; | |
-moz-border-radius: 240% 0 0 110% / 140% 0 0 100%; | |
-ms-border-radius: 240% 0 0 110% / 140% 0 0 100%; | |
-o-border-radius: 240% 0 0 110% / 140% 0 0 100%; | |
border-radius: 240% 0 0 110% / 140% 0 0 100%; | |
} | |
.T { | |
position: relative; | |
top: 12.5px; | |
left: 10px; | |
width: 100px; | |
height: 125px; | |
border-top: solid 15px #000000; | |
} | |
.T:before { | |
position: absolute; | |
content: ''; | |
top: 0; | |
left: 42px; | |
width: 16px; | |
height: 110px; | |
background-color: #000000; | |
} | |
.U { | |
position: relative; | |
top: 12.5px; | |
left: 10px; | |
width: 60px; | |
height: 80px; | |
border-width: 0 16px 0 16px; | |
border-color: #000000; | |
border-style: solid; | |
} | |
.U:before { | |
position: absolute; | |
content: ''; | |
top: 65px; | |
left: -16px; | |
width: 60px; | |
height: 45px; | |
border-width: 0 16px 15px 16px; | |
border-color: #000000; | |
border-style: solid; | |
-webkit-border-radius: 0 0 200% 200% / 0 0 300% 300%; | |
-moz-border-radius: 0 0 200% 200% / 0 0 300% 300%; | |
-ms-border-radius: 0 0 200% 200% / 0 0 300% 300%; | |
-o-border-radius: 0 0 200% 200% / 0 0 300% 300%; | |
border-radius: 0 0 200% 200% / 0 0 300% 300%; | |
} | |
.V { | |
position: relative; | |
top: 12.5px; | |
left: 30px; | |
width: 59px; | |
} | |
.V:before { | |
-webkit-transform: skew(18deg, 0); | |
-moz-transform: skew(18deg, 0); | |
-ms-transform: skew(18deg, 0); | |
-o-transform: skew(18deg, 0); | |
transform: skew(18deg, 0); | |
position: absolute; | |
content: ''; | |
top: 0; | |
left: 0; | |
height: 125px; | |
border-left: solid 16px #000000; | |
} | |
.V:after { | |
-webkit-transform: skew(-18deg, 0); | |
-moz-transform: skew(-18deg, 0); | |
-ms-transform: skew(-18deg, 0); | |
-o-transform: skew(-18deg, 0); | |
transform: skew(-18deg, 0); | |
position: absolute; | |
content: ''; | |
top: 0; | |
right: 0; | |
height: 125px; | |
border-left: solid 16px #000000; | |
} | |
.W { | |
position: relative; | |
top: 12.5px; | |
left: 25px; | |
width: 100px; | |
} | |
.W:before { | |
-webkit-transform: skew(11deg, 0); | |
-moz-transform: skew(11deg, 0); | |
-ms-transform: skew(11deg, 0); | |
-o-transform: skew(11deg, 0); | |
transform: skew(11deg, 0); | |
position: absolute; | |
content: ''; | |
top: 0; | |
left: 0; | |
width: 42px; | |
height: 125px; | |
border-width: 0 13px 0 15px; | |
border-color: #000000; | |
border-style: solid; | |
} | |
.W:after { | |
-webkit-transform: skew(-11deg, 0); | |
-moz-transform: skew(-11deg, 0); | |
-ms-transform: skew(-11deg, 0); | |
-o-transform: skew(-11deg, 0); | |
transform: skew(-11deg, 0); | |
position: absolute; | |
content: ''; | |
top: 0; | |
right: 0; | |
width: 42px; | |
height: 125px; | |
border-width: 0 15px 0 13px; | |
border-color: #000000; | |
border-style: solid; | |
} | |
.X { | |
position: relative; | |
top: 12.5px; | |
left: 50px; | |
width: 16px; | |
height: 125px; | |
} | |
.X:before { | |
-webkit-transform: skew(32deg, 0); | |
-moz-transform: skew(32deg, 0); | |
-ms-transform: skew(32deg, 0); | |
-o-transform: skew(32deg, 0); | |
transform: skew(32deg, 0); | |
position: absolute; | |
content: ''; | |
top: 0; | |
left: 0; | |
width: 16px; | |
height: 125px; | |
background-color: #000000; | |
} | |
.X:after { | |
-webkit-transform: skew(-32deg, 0); | |
-moz-transform: skew(-32deg, 0); | |
-ms-transform: skew(-32deg, 0); | |
-o-transform: skew(-32deg, 0); | |
transform: skew(-32deg, 0); | |
position: absolute; | |
content: ''; | |
top: 0; | |
right: 0; | |
width: 16px; | |
height: 125px; | |
background-color: #000000; | |
} | |
.Y { | |
position: relative; | |
top: 92.5px; | |
left: 52px; | |
width: 16px; | |
height: 50px; | |
background-color: #000000; | |
} | |
.Y:before { | |
-webkit-transform: skew(28deg, 0); | |
-moz-transform: skew(28deg, 0); | |
-ms-transform: skew(28deg, 0); | |
-o-transform: skew(28deg, 0); | |
transform: skew(28deg, 0); | |
position: absolute; | |
content: ''; | |
top: -80px; | |
left: -21px; | |
width: 16px; | |
height: 80px; | |
background-color: #000000; | |
} | |
.Y:after { | |
-webkit-transform: skew(-28deg, 0); | |
-moz-transform: skew(-28deg, 0); | |
-ms-transform: skew(-28deg, 0); | |
-o-transform: skew(-28deg, 0); | |
transform: skew(-28deg, 0); | |
position: absolute; | |
content: ''; | |
top: -80px; | |
right: -21px; | |
width: 16px; | |
height: 80px; | |
background-color: #000000; | |
} | |
.Z { | |
position: relative; | |
top: 12.5px; | |
left: 10px; | |
width: 90px; | |
height: 95px; | |
border-width: 15px 0 15px 0; | |
border-color: #000000; | |
border-style: solid; | |
} | |
.Z:before { | |
-webkit-transform: skew(-37deg, 0); | |
-moz-transform: skew(-37deg, 0); | |
-ms-transform: skew(-37deg, 0); | |
-o-transform: skew(-37deg, 0); | |
transform: skew(-37deg, 0); | |
position: absolute; | |
content: ''; | |
top: 0; | |
left: 36px; | |
width: 18px; | |
height: 95px; | |
background-color: #000000; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment