元オリンピックロゴを CSS だけで今更作ってみる

今更感。

そろそろ新しいオリンピックロゴが決まりそうなので、新しいロゴも作れたら作りたいですね。もう先人のどなたかが CSS で作っているかもしれませんが、決してパクリではありません。

上はただの画像です。下に CSS でこの画像を再現したデモがありますのでご覧ください。

HTML
<div id="op-back-ground">
    <div id="op-gold"></div>
    <div id="op-silver"></div>
    <div id="op-circle"></div>
    <div id="op-black"></div>
    <div id="op-red"></div>
</div>

CSS
/*全体を囲う block*/
#op-back-ground {
    font-size: 200px; //大きさを変更したい場合はこの値を変更
    background-color: #fff;
    position: relative;
    overflow: hidden;
    height: 3em;
    width: 3em;
}
 
/*左上の金色*/
#op-gold {
    background-color: #aa8f47;
    position: absolute;
    top: 0;
    left: 0;
    height: 1em;
    width: 1em;
}
 
/*右下の銀色*/
#op-silver {
    background-color: #afb0af;
    position: absolute;
    top: 2em;
    left: 2em;
    height: 1em;
    width: 1em;
}
 
/*中央の白い円*/
#op-circle {
    background-color: #fff;
    position: absolute;
    top: -0.08em;
    left: -0.08em;
    height: 3.16em;
    width: 3.16em;
    border-radius: 50%;
}
 
/*黒い棒*/
#op-black {
    background-color: #323332;
    position: absolute;
    top: 0;
    left: 1em;
    height: 3em;
    width: 1em;
}
 
/*右上の赤い円*/
#op-red {
    background-color: #dc140e;
    position: absolute;
    top: 0;
    left: 2em;
    height: 1em;
    width: 1em;
    border-radius: 50%;
}
 
/*スマホ等のレスポンシブ対応*/
@media (max-width:600px) {
    #op-back-ground {
        font-size: 30vw;
    }
}