クラシルのロゴ作ってみた

クラシルのロゴが新しくなっていました。

ぱっと見で、僕でもHTML&CSSで作れそうと思い作ってみました。

HTMLつくる

index.html

<div class="container">
    <div class="half"></div>
    <div class="leaf"></div>
    <div class="quarter"></div>
</div>

左半分、右上の葉っぱの部分、右下の四分円の3つに分けて捉えました。
CSSで配置、サイズを整えていきます。

CSSを雑につくる

style.css

.container {
    width: 200px;
    height: 200px;
}
.half {
    float: left;
    width: 100px;
    height: 200px;
    background-color: rgb(255, 81, 0);
}
.leaf {
    float: right;
    width: 100px;
    height: 100px;
    background: rgb(0, 183, 0);
}
.quarter {
    float: right;
    width: 100px;
    height: 100px;
    background-color: rgb(255, 81, 0);
}

floatでそれぞれ配置を整えます

途中経過

丸みを付ける

.container {
    width: 200px;
    height: 200px;
}
.half {
    float: left;
    width: 100px;
    height: 200px;
    background-color: rgb(255, 81, 0);
+   border-radius: 100px 0 0 100px;
}
.leaf {
    float: right;
    width: 100px;
    height: 100px;
    background: rgb(0, 183, 0);
+   border-radius: 200px 0 200px 0;
}
.quarter {
    float: right;
    width: 100px;
    height: 100px;
    background-color: rgb(255, 81, 0);
+   border-radius: 0 0 0 100%;
}

結果

できた

ちなみに

社長が高校の先輩ですが僕はクックパッド派です