レイアウトサンプル

■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;}