- ホーム »
- レイアウトサンプル
レイアウトサンプル
■FLOW
/* フロー */
.flow { margin:0 auto 50px;}
.flow .box {margin:0 auto 33px; width:80%; padding:10px; position:relative;}
.flow .box:after {border-top:25px solid #eee; border-left:70px solid transparent; border-right:70px solid transparent; content:””; position: absolute; bottom:-28px; left:50%; margin-left:-70px;}
.flow .box:last-child:after {border:none;}
■ビフォアアフター
/* 比較図 */
.ba { margin:0 auto 33px; width:80%; position:relative; font-size:1.6em; font-weight:bold; line-height: 1.4;}
/* 全体を囲う要素の中央に三角形を表示する */
.ba:before { margin:-20px 0 0 -10px; border:20px solid transparent; border-left-color:#FFC300; content: “”; position: absolute; top: 50%; left: 50%;}
/* floatを使うのでclearfixの指定 */
.ba:after { height:0; visibility:hidden; content:”.”; display:block; clear:both;}
/* ビフォーとアフターのボックス */
.ba .beforeBox,
.ba .afterBox {padding: 10px; width: 35%; border: 3px solid #ACFEA3; -webkit-border-radius: 5px; border-radius: 5px;position: relative;}
.ba .beforeBox {float: left;}
.ba .afterBox {float: right;}