書く内容がPythonに偏っていたので、たまには違うことをやりたいなと。
とりあえずCSSでイラスト作れたら嬉しいなと思ったので、簡単な絵を描いてみました。
餅
餅がぷくっと膨れている様子や焦げ目などは難しいので却下。鏡餅らしきものをさくっと作ってみました。
mochi.html
<head>
<link href="mochi.css" rel="stylesheet">
<div class="bottom">
<div class="middle"></div>
<div class="top"></div>
</div>
</head>
mochi.css
.bottom {
width: 300px;
height: 100px;
line-height: 100px;
background-color: white;
border-radius: 100vh;
border: solid 2px black;
position:relative;
top: 300px;
left:110px;
}
.middle {
width: 250px;
height: 100px;
line-height: 100px;
background-color: white;
border-radius: 100vh;
border: solid 2px black;
position:absolute;
top: -105px;
left:22.5px;
}
.top {
width: 100px;
height: 100px;
background-color: orange;
border-radius: 50%;
position:absolute;
top: -205px;
left:100px;
}
最後に
さくっと描いたといいながら、意外と苦戦しました。