hrgrweblog

だらだらとITを語るブログ「ヒロガルウェブログ」(旧hrgrweb.comブログ)

【CSS】divとdivが棒でつながる感じのデザインのメモ書き

さてこんにちは。SofPyon です。ちょっとメモ代わりに書いておきます。メモなんで、役に立ちませんね。はい。

棒みたいなやつ(クラス「foo」)

.foo::before{
content
'';
top-16px;
positionabsolute;
width10px;
height16px;
background-colorrgba(0, 0, 0, 0.1);
}

.foo

padding1em;
margin0;
margin-bottom16px;
background-color#fff;
box-shadow0px 1px 3px #aeaeae;
positionrelative;

適当に書いたので、適当に自分なりに編集してご自由にお使いください。

こんな感じ

棒が出てる感じ.foo を立てに並べた結果、棒でつながって表示されます。

広告を非表示にする