Content Block with Sliced Corner

Content block/widget with image, text and date label

Below you can find an example of responsive content block with sliced corner effect. The block has image, text and date label. It can be a part of articles overview page, related content area or any other place where you need such content structure. You can use it together with any HTML/CSS Framework, like Twitter Bootstrap, Zurb Foundation, Skeleton and others.

All fields below are editable. You can experiment with the code and see the result instantly:
<div class="container">
<div class="sc-block">
<div class="image-container">
<img class="block-image" src="/images/kuala-lumpur-hdr-400-175.jpg">
<div class="label">January 17, 2017</div>
</div>
<div class="block-content">
<h2 class="block-header">How to make HDR photo</h2>
<p>
Making high-quality HDR image with your cheap camera
</p>
</div>
</div>
</div>
HTML
@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Layout */

body {
font-family: 'Montserrat', sans-serif;
background: #fff;
}

.container {
padding: 0 20px;
max-width: 400px;
margin: 30px auto 0;
}

/* Sliced Corner Block Styles */

.sc-block {
border: 1px solid #ddd;
background: #fff;
margin-bottom: 30px;
position: relative;
position: relative;
}

.sc-block .block-image {
width: 100%;
}

.sc-block .block-header {
font-size: 16px;
font-weight: 700;
margin-bottom: 15px;
color: #333;
text-transform: uppercase;
}

.sc-block .block-content {
padding: 15px 20px 25px;
font-size: 15px;
color: #999;
line-height: 23px;
}

.sc-block:after {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0 30px 30px 0;
border-color: transparent #fff transparent transparent;
position: absolute;
top: -1px;
right: -1px;
}

.sc-block:before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0 30px 30px 0;
border-color: transparent #ddd transparent transparent;
position: absolute;
top: 0px;
right: 0px;
}

.sc-block .image-container {
position: relative;
}

.sc-block .label {
background: #3498db;
color: #fff;
position: absolute;
bottom: 25px;
left: 20px;
padding: 4px 10px;
font-size: 14px;
height: 27px;
}

.sc-block .label:after {
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 27px 0 0 20px;
border-color: transparent transparent transparent #3498db;
position: absolute;
right: -20px;
bottom: 0;
}
CSS
Browser support:
           
8+