<div class="container">
<h1 class="intro">Cutting Corners with CSS</h1>
<ul class="blocks blocks_4up">
<li>
<div class="cut">
<div class="cut-bd cut-bd_red">
<div class="cut-hd cut-hd_red">
<h3 class="hdg">Sometimes...</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque quasi velit laudantium totam consequatur aliquam possimus quidem ullam esse nemo excepturi alia.</p>
</div>
</div>
</li>
<li>
<div class="cut">
<div class="cut-bd cut-bd_red">
<div class="cut-hd cut-hd_red">
<h3 class="hdg">I..</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque quasi velit laudantium totam consequatur aliquam possimus quidem ullam esse nemo excepturi alia.</p>
</div>
</div>
</li>
<li>
<div class="cut">
<div class="cut-bd cut-bd_red">
<div class="cut-hd cut-hd_red">
<h3 class="hdg">Cut....</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque quasi velit laudantium totam consequatur aliquam possimus quidem ullam esse nemo excepturi alia.</p>
</div>
</div>
</li>
<li>
<div class="cut">
<div class="cut-bd cut-bd_red">
<div class="cut-hd cut-hd_red">
<h3 class="hdg">Corners!</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque quasi velit laudantium totam consequatur aliquam possimus quidem ullam esse nemo excepturi alia.</p>
</div>
</div>
</li>
</ul>
<div class="cut">
<div class="cut-bd cut-bd_green">
<div class="cut-hd cut-hd_green">
<h3 class="hdg">P.S. - I'm loving flat colors at the moment!</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque quasi velit laudantium totam consequatur aliquam possimus quidem ullam esse nemo excepturi alia.</p>
</div>
</div>
</div>
@import "compass/css3";
@import "compass/reset";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
body {
background: #34495e;
font-size: 100%;
line-height: 1.3;
font-family: 'Source Sans Pro', sans-serif;
}
.container {
max-width: 960px;
margin: 75px auto;
> * + * {
margin-top: 25px;
}
}
.blocks {
margin-left: -2%;
&:before, &:after {
content: "";
display: table;
}
&:after {
content: "";
clear: both;
}
}
.blocks > * {
float: left;
margin-left: 2%;
}
.blocks_4up > * { width: 23%; }
.cut {
overflow: hidden;
padding: 0 0 30px;
}
.cut-bd {
padding: 15px 15px 0;
position: relative;
}
.cut-hd {
margin: 0 0 5px;
padding: 0 0 5px;
}
.cut-hd_red { border-bottom: 1px solid darken(#e74c3c,5%); }
.cut-hd_green { border-bottom: 1px solid darken(#1abc9c,5%); }
.cut-bd_red {
border-top: 5px solid #f39c12;
background: #e74c3c;
color: #ecf0f1;
text-shadow: 1px 1px rgba(#ffffff,.2);
&:before {
content: "";
width: 100%;
height: 30px;
position: absolute;
top: 100%;
right: 30px;
background: #e74c3c;
}
&:after {
content: "";
width: 0;
height: 0;
margin-left: -30px;
position: absolute;
top: 100%;
left: 100%;
border: 15px solid #e74c3c;
border-right: 15px solid transparent;
border-bottom: 15px solid transparent;
}
}
.cut-bd_green {
border-top: 5px solid #ecf0f1;
background: #1abc9c;
color: #ecf0f1;
text-shadow: 1px 1px rgba(#ffffff,.2);
&:before {
content: "";
width: 100%;
height: 30px;
position: absolute;
top: 100%;
right: 30px;
background: #1abc9c;
}
&:after {
content: "";
width: 0;
height: 0;
margin-left: -30px;
position: absolute;
top: 100%;
left: 100%;
border: 15px solid #1abc9c;
border-right: 15px solid transparent;
border-bottom: 15px solid transparent;
}
}
.intro {
color: #ecf0f1;
font-size: 3em;
font-weight: bold;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 3px 3px rgba(darken(#2c3e50,5%),1);
}
.hdg {
color: #ffff;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.