chuckです。
HTMLとCSSでオシャレなベルト風アイテムを作ってみたいと思います。
ひとまずの完成図はこちら。
こちらをベースにして試行錯誤していこうかなと思います。
基本となるHTML・CSS
HTML
CSS
divを２重にしています。親のdivを赤色の背景に使い、子のdivを破線に使っています。
えーと、以上です笑
ポイントはborderにsolidではなくdashedを使ってるところくらいですかね…。
色変えてみる
このまま終わっては寂しいので、バリエーションを用意してみます。
3本用意してみました。
ちょっと細くしました。ベルトっぽさが増しました。
擬似要素使う
保守性を高めるために、もう少しコードをいじります。
ベルトの破線部分はスタイル に関する箇所なので、HTMLでdivを用意するのはよろしくありません。なるべくCSSのみで簡潔させるべきです。
そこで擬似要素を使います。今回は擬似要素のafterを使って、子要素のdivに充てていたスタイルを適用させ直します。
それがこちら。
Sassの自動コンパイルのせいで読みにくいかもしれません…すみません…。
擬似要素にはcontent属性
ちなみに、擬似要素にはcontent属性が必須です。空文字（””）でもいいので指定しましょう。
また、今回のように擬似要素をスタイルのために使う場合、display: block; も事実上必須です。でないと、表示されません。
スッキリしたHTML
スタイルを擬似要素に投げたので、HTMLがスッキリしました。
本来の目的であるベルトのために、divが使われています。
よりCSS3っぽく
せっかくのなので、よりCSS３らしくします。回転させます。
そして背景画像を用意したものがこちら。
これ、ベルト邪魔ですね…。
まとめ
おしゃれなパーツを思いついたは良いものの、使いドコロに困りました。
最終的なコード
HTML
CSS
slim