Tablet View
SP View
appeal_008
ナンバリングを大きく左にずらして画像に重ねたデザイン
ナンバー付きでいくつかの項目を説明するような時、右カラムにあるナンバーをCSSで大きく左にずらし画像と重ねたデザイン。更にナンバーの背景に色を入れていますが、平行四辺形になるようにしています。
2
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
- 番号はリードに指定し、display：inline-blockにしています。さらにtransformにskewX(-10deg)とすることで平行四辺形にしています。
- リードの指定で色（background-color、color）も角度も変更可能です。