はてなブックマーク

タイトル通りCSSだけでイラストを描いてみたというお話です。 See the Pen Tippy_CSS by Ryo (@flag_ryo) on CodePen. イラストの構成 CSSでイラストを描く時に利用する基本的な図形は四角形、丸、三角形（border）です。 これらを上手いこと組み合わせて一つの形にします。 今回、私が作成しているティッピーさんを分解すると下記画像のようになります。 耳の部分は角を丸くした四角形と内側のピンク部分には一部を「border-radius」で丸くした三角形を利用し、他の部位は丸だけで構成しています。コードの詳細は上部のCodepenリンクよりご確認ください。 HTMLタグの構造をシンプルに仕上げるには 下記、要素・プロパティをどんどん活用しましょう。 中でもbox-shadowを上手いこと使えれば、タグ１つでとんでもない大作ができます。 1. :b