モンハン Advent Calendar 2015 22日目!
遅刻してしまいましたが…!!!
以下、ソースです。
(ねむみできれいにしてません…)
.redDragon{ position: relative; display: block; width: 200px; height: 200px; margin: 50px auto 0; background: #eee; } .body01{ position: absolute; top: 74px; left: 62px; width: 50px; height: 50px; background: #a72525; border-radius: 10px; } .body01:before{ position: absolute; content: ""; display: block; top: 10px; left: 10px; width: 5px; height: 50px; background: #db7a59; z-index: 2; } .body01:after{ position: absolute; content: ""; display: block; top: 17px; left: 24px; width: 10px; height: 35px; border-radius: 4px; background: #eee; } .body02{ position: absolute; top: 63px; left: 108px; width: 30px; height: 66px; background: #a72525; } .body02:before{ position: absolute; content: ""; display: block; top: 21px; left: -5px; width: 5px; height: 40px; background: #db7a59; z-index: 2; } .body02:after{ position: absolute; content: ""; display: block; top: 17px; left: -33px; width: 29px; height: 5px; background: #db7a59; } .handle01{ position: absolute; top: 118px; left: 108px; width: 30px; height: 5px; background: #db7a59; } .feather{ position: absolute; top: 15px; left: 62px; width: 0; height: 0; border-style: solid; border-width: 69px 66.5px 0 66.5px; border-color: #a72525 transparent transparent transparent; } .feather:before{ position: absolute; content: ""; display: block; top: -59px; left: -46px; width: 100px; height: 10px; background: #6a0000; z-index: 2; } .feather:after{ position: absolute; content: ""; display: block; top: -40px; left: -13px; width: 35px; height: 7px; background: #6a0000; z-index: 2; } .feather__handle01{ position: absolute; top: 7px; left: 163px; width: 5px; height: 82px; background: #db7a59; transform: rotate(44deg); z-index: 2; } .feather__handle01:before{ position: absolute; content: ""; display: block; top: 21px; left: -5px; width: 5px; height: 55px; background: #6a0000; z-index: 2; } .feather__handle01:after{ position: absolute; content: ""; display: block; top: 60px; left: -19px; width: 5px; height: 33px; background: #6a0000; transform: rotate(-85deg); z-index: 2; } .feather__handle02{ position: absolute; top: 22px; left: 96px; width: 7px; height: 54px; background: #6a0000; transform: rotate(-44deg); z-index: 2; } .feather__handle02:before{ position: absolute; content: ""; display: block; top: 44px; left: -12px; width: 9px; height: 30px; transform: rotate(44deg); background: #6a0000; z-index: 2; } .feather__handle02:after{ position: absolute; content: ""; display: block; top: 67px; left: -21px; width: 8px; height: 22px; background: #6a0000; z-index: 2; } .feather__thorn01{ position: absolute; top: 1px; left: 112px; width: 0; height: 0; border-style: solid; border-width: 0 8px 15px 4px; border-color: transparent transparent #6a0000 transparent; } .feather__thorn01:before{ position: absolute; content: ""; display: block; top: 0; left: 20px; width: 0; height: 0; border-style: solid; border-width: 0 8px 15px 4px; border-color: transparent transparent #6a0000 transparent; z-index: 2; } .feather__thorn01:after{ position: absolute; content: ""; display: block; top: 0; left: 40px; width: 0; height: 0; border-style: solid; border-width: 0 8px 15px 4px; border-color: transparent transparent #6a0000 transparent; z-index: 2; } .feather__thorn02{ position: absolute; top: 1px; left: 70px; width: 0; height: 0; border-style: solid; border-width: 0 8px 15px 4px; border-color: transparent transparent #6a0000 transparent; } .feather__thorn02:before{ position: absolute; content: ""; display: block; top: 0; left: 20px; width: 0; height: 0; border-style: solid; border-width: 0 8px 15px 4px; border-color: transparent transparent #6a0000 transparent; z-index: 2; } .feather__thorn02:after{ position: absolute; content: ""; display: block; top: 7px; left: -44px; width: 0; height: 0; border-style: solid; border-width: 0px 30px 15px 0; border-color: transparent #6a0000 transparent transparent; z-index: 2; } .body02__thorn01{ position: absolute; top: 83px; left: 46px; width: 0; height: 0; border-style: solid; border-width: 0px 16px 11px 0; border-color: transparent #6a0000 transparent transparent; } .body02__thorn01:before{ position: absolute; content: ""; top: 15px; left: 0; width: 0; height: 0; border-style: solid; border-width: 0px 16px 11px 0; border-color: transparent #6a0000 transparent transparent; z-index: 2; } .body02__thorn01:after{ position: absolute; content: ""; top: -24px; left: 26px; width: 0; height: 0; border-style: solid; border-width: 0 8px 15px 4px; border-color: transparent transparent #6a0000 transparent; } .face01{ position: absolute; top: 116px; left: 24px; width: 40px; height: 20px; border-radius: 4px; background: #a72525; z-index: 3; transform: rotate(26deg); } .face01:before{ position: absolute; content: ""; top: -12px; left: 16px; width: 50px; height: 32px; border-radius: 82px; background: #a72525; } .face01:after{ position: absolute; content: ""; top: 11px; left: 0px; width: 9px; height: 13px; background: #a72525; } .face02{ position: absolute; top: 148px; left: 24px; width: 61px; height: 18px; border-radius: 4px; background: #db7a59; z-index: 4; transform: rotate(-4deg); } .face02:before{ position: absolute; content: ""; top: -17px; left: 17px; width: 0; height: 0; border-style: solid; border-width: 0 22.5px 17px 20.5px; border-color: transparent transparent #db7a59 transparent; } .face02:after{ position: absolute; content: ""; top: -5px; left: 0px; width: 9px; height: 13px; background: #db7a59; } .eye01{ position: absolute; top: 122px; left: 61px; width: 10px; height: 10px; border-radius: 4px; background: #9fe2ff; z-index: 4; } .face02__thorn01{ position: absolute; top: 85px; left: 75px; width: 8px; height: 36px; border-radius: 4px; background: #6a0000; z-index: 2; transform: rotate(46deg); } .face02__thorn01:after{ position: absolute; content: ""; top: 0; left: 15px; width: 8px; height: 36px; border-radius: 4px; background: #6a0000; z-index: 2; transform: rotate(5deg); } .face02__thorn01:before{ position: absolute; content: ""; top: 8px; left: 30px; width: 8px; height: 36px; border-radius: 4px; background: #6a0000; z-index: 2; transform: rotate(-5deg); } .tail01{ position: absolute; top: 60px; left: 139px; width: 0; height: 0; border-style: solid; border-width: 0 0 25px 30px; border-color: transparent transparent #a72525 transparent; } .tail01:before{ position: absolute; content: ""; top: 25px; left: -31px; width: 0; height: 0; border-style: solid; border-width: 13px 13px 0 0; border-color: #a72525 transparent transparent transparent; } .tail01:after{ position: absolute; content: ""; top: 25px; left: 0; width: 0; height: 0; border-style: solid; border-width: 0 13px 13px 0; border-color: transparent #a72525 transparent transparent; } .tail02{ position: absolute; top: 60px; left: 169px; width: 25px; height: 25px; background: #a72525; } .tail02:before{ position: absolute; content: ""; top: 25px; left: 10px; width: 15px; height: 80px; background: #a72525; } .tail02:after{ position: absolute; content: ""; top: 105px; left: 10px; width: 0; height: 0; border-style: solid; border-width: 15px 15px 0 0; border-color: #a72525 transparent transparent transparent; } .tail03{ position: absolute; top: 164px; left: 119px; width: 60px; height: 15px; background: #a72525; } .tail03:before{ position: absolute; content: ""; top: -1px; left: -60px; width: 0; height: 0; border-style: solid; border-width: 0 0 15px 53px; border-color: transparent transparent #6a0000 transparent; } .tail03:after{ position: absolute; content: ""; top: -15px; left: 46px; width: 0; height: 0; border-style: solid; border-width: 0 0 15px 15px; border-color: transparent transparent #a72525 transparent; } .tail01__thorn01{ position: absolute; top: 179px; left: 119px; width: 0; height: 0; border-style: solid; border-width: 11px 7px 0 6px; border-color: #6a0000 transparent transparent transparent; } .tail01__thorn01:after{ position: absolute; content: ""; top: -11px; left: 10px; width: 0; height: 0; border-style: solid; border-width: 11px 7px 0 6px; border-color: #6a0000 transparent transparent transparent; } .tail01__thorn01:before{ position: absolute; content: ""; top: -11px; left: 25px; width: 0; height: 0; border-style: solid; border-width: 11px 7px 0 6px; border-color: #6a0000 transparent transparent transparent; } .tail01__thorn02{ position: absolute; top: 61px; left: 194px; width: 0; height: 0; border-style: solid; border-width: 5.5px 0 5.5px 13px; border-color: transparent transparent transparent #6a0000; } .tail01__thorn02:after{ position: absolute; content: ""; top: 20px; left: -13px; width: 0; height: 0; border-style: solid; border-width: 5.5px 0 5.5px 13px; border-color: transparent transparent transparent #6a0000; } .tail01__thorn02:before{ position: absolute; content: ""; top: -16px; left: -31px; width: 0; height: 0; border-style: solid; border-width: 0 6.5px 11px 6.5px; border-color: transparent transparent #6a0000 transparent; } .tail01__thorn03{ position: absolute; top: 110px; left: 194px; width: 0; height: 0; border-style: solid; border-width: 5.5px 0 5.5px 13px; border-color: transparent transparent transparent #6a0000; } .tail01__thorn03:after{ position: absolute; content: ""; top: 20px; left: -13px; width: 0; height: 0; border-style: solid; border-width: 5.5px 0 5.5px 13px; border-color: transparent transparent transparent #6a0000; } .tail01__thorn03:before{ position: absolute; content: ""; top: 40px; left: -13px; width: 0; height: 0; border-style: solid; border-width: 5.5px 0 5.5px 13px; border-color: transparent transparent transparent #6a0000; } .leg01{ position: absolute; top: 92px; left: 143px; width: 30px; height: 41px; border-radius: 15px; background: #a72525; } .leg01:after{ position: absolute; top: 26px; content: ""; left: 8px; width: 20px; height: 30px; background: #a72525; } .leg01:before{ position: absolute; content: ""; top: 55px; left: 8px; width: 0; height: 0; border-style: solid; border-width: 15px 20px 0 0; border-color: #a72525 transparent transparent transparent; } .leg02{ position: absolute; top: 143px; left: 127px; width: 0; height: 0; border-style: solid; border-width: 19px 0 0 25px; border-color: transparent transparent transparent #a72525; } .leg02:before{ position: absolute; content: ""; top: -19px; left: -63px; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 38px; border-color: transparent transparent #6a0000 transparent; } .leg02:after{ position: absolute; content: ""; top: -10px; left: -56px; width: 0; height: 0; border-style: solid; border-width: 0px 0 10px 31px; border-color: transparent transparent #6a0000 transparent; }
html
<div class="redDragon"> <div class="body01"></div> <div class="body02"></div> <div class="body02__thorn01"></div> <div class="handle01"></div> <div class="feather"></div> <div class="feather__handle01"></div> <div class="feather__handle02"></div> <div class="feather__thorn01"></div> <div class="feather__thorn02"></div> <div class="tail01"></div> <div class="tail02"></div> <div class="tail03"></div> <div class="tail01__thorn01"></div> <div class="tail01__thorn02"></div> <div class="tail01__thorn03"></div> <div class="leg01"></div> <div class="leg02"></div> <div class="face01"></div> <div class="eye01"></div> <div class="face02"></div> <div class="face02__thorn01"></div> </div>
ごりおしです。
もうつかれましたw