<section class=card>
	<header class=ribbon>
		<h2>Egg &amp; Chicken Salad</h2>
	</header>
	<img src=
http://media02.hongkiat.com/github-demo/dish.png class=img>
	<ul class=recipe>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<table class="stat">
		<tr>
			<td><span class="num">15</span> Minutes</td>
			<td><span class="num">87</span> Likes</td>
			<td><span class="num">105</span> Shares</td>
		</tr>
	</table>
</section>
.ribbon {
	--p: 15px;
	background-color: rgb(170, 170, 170);
	display: inline-block;
	height: 60px;
	margin-bottom: 10px;
	margin-top: 20px;
	padding: 0 var(--p);
	position: relative;
	right: var(--p);
	text-align: center;
	width: 100%;
}

.ribbon:before,
.ribbon:after {
	background-color: inherit;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	top: calc(var(--p)/2);
	width: var(--p);
	filter: brightness(.5);
	z-index: -1;
}

.ribbon:before {
	left: 0;
	transform: skewy(45deg);
}

.ribbon:after {
	right: 0;
	transform: skewy(-45deg);
}


/* ⇢ following styles are for demo decoration ⇠ */

.card {
	height: 300px;
	margin: auto;
	margin-top: 60px;
	width: 500px;
	background-color: beige;
}

.img {
	width: 40%;
	float: left;
	filter: brightness(1.07) drop-shadow(hsl(210, 25%, 90%) 0 0 10px);
	margin-left: -20px;
}

.recipe {
	list-style: none;
	padding: 0;
	margin-bottom: 0;
}

.stat,
.recipe {
	width: 60%;
	margin-left: 40%;
}

.stat {
	text-align: center;
}

.num {
	color: #F13825;
}

.recipe li {
	width: 100%;
	height: 4px;
	margin: 10px 0;
	background-color: lightgrey;
}

h2 {
	margin: 0;
	line-height: 60px;
	color: ivory;
	text-transform: uppercase;
}

section,
header {
	display: block;
}

body {
	font-family: Crimson Text;
	margin: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.