どうも7noteです。お正月にふさわしいアレをCSSで作りました。
ソース
index.html
<divclass="kagamimochi"><divclass="mikan"></div><divclass="mochi1"></div><divclass="mochi2"></div><divclass="kami"></div></div>style.css
.kagamimochi{width:100px;text-align:center;}.mikan{width:50px;height:40px;background:#e88522;border-radius:50%;position:relative;z-index:10;display:inline-block;}.mikan::after{content:"";width:15px;height:5px;background:linear-gradient(#4f9c5d50%,#6cb57650%);border-radius:50%;display:inline-block;position:absolute;top:0;right:10px;transform:rotate(-20deg);display:inline-block;}.mochi1{width:80px;height:40px;background:#fff;border:1pxsolid#000;border-radius:50%;display:inline-block;margin-top:-15px;position:relative;z-index:5;}.mochi2{width:100px;height:50px;background:#fff;border:1pxsolid#000;border-radius:50%;display:inline-block;margin-top:-20px;position:relative;z-index:4;}.kami{width:92px;height:92px;background:#fff;border:5pxsolid#f00;transform:rotateX(45deg)rotateZ(45deg);display:inline-block;margin-top:-75px;position:relative;z-index:1;}まとめ
かんたんなイラストならCSSでなんでもできそうな気がしてきますね。
まぁ流行りはCSVのような気もします。。。
また思いついたら他のものも作ってみたいと思います。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ