#CSS: CSS only visual rich section division
{"page":"css","view":"split-vertical"}<div id="main" role="main" class="row">
<section>
... Section 1 ...
</section>
<section>
... Section 2 ...
</section>
</div>/**
* CSS only visual rich section division
*/
body {
background-color: #264e86;
color: #fff;
font-size: 2em;
}
#main {
width: 90%;
margin: 3em auto 0;
}
#main section {
width: 90%;
margin: 0 auto 50px;
position: relative;
}
#main section:after {
content: " ";
display: block;
height: 30px;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-o-border-radius: 0 0 10px 10px;
-khtml-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
background: #264e86;
background: linear-gradient(top, #264e86, #1d3a64);
margin-left: -33px;
margin-right: -33px;
margin-top: 2px;
}