モンハン Advent Calendar 2015 22日目!

htmlとcssのみでリオレウスです。

遅刻してしまいましたが…!!!


www.adventar.org


f:id:amimimi:20151223005915p:plain


以下、ソースです。

(ねむみできれいにしてません…)




css

.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