https://codepen.io/anon/pen/wxRYRG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background-color: #333;
counter-reset: n;
font-family: "Open Sans", sans-serif;
text-align: center;
}
h1 {
color: #FFF;
}
p {
background-image: linear-gradient(to right, #f7f7f7 50%, #ebebed 50%);
border-radius: 24px;
box-sizing: border-box;
clip-path: polygon(0 0, 100% 0, 100% 25px, 90% 25px, 90% 253px, 100% 253px, 100% 100%, 0 100%);
display: inline-block;
height: 620px;
margin: 0 24px;
padding: 260px 10px 10px;
position: relative;
vertical-align: top;
width: 190px;
}
p::after {
content: attr(data-icon);
font-size: 30px;
position: absolute;
bottom: 10px;
right: 10px;
}
p::before {
background-color: var(--item-color);
background-image: linear-gradient(to right, transparent 36px, rgba(0,0,0,0.25) 36px, rgba(0,0,0,0.35) 30%, rgba(0,0,0,0.1));
border-radius: 100% 0 0 100% / 50% 0 0 50%;
box-sizing: border-box;
box-shadow: inset 0 0 10px rgba(0,0,0,1);
color: #FFF;
content: counter(n);
counter-increment: n;
font-size: 90px;
font-weight: bold;
height: 230px;
line-height: 230px;
padding-left: 10%;
position: absolute;
right: 0;
text-align: center;
text-shadow: 2px 3px 1px rgba(0,0,0,0.25);
top: 24px;
width: 130px;
}
</style>
</head>
<body>
<h1>Инфографика</h1>
<p style="--item-color: #cb2c30;" data-icon="❤️">
Торт булочки пончик шоколад торт желе семечки вафли яблочный пирог сладкие булочки маффин чупа-чупс. Ванильное мороженое шоколад пряники.
</p>
<p style="--item-color: #de04cd;" data-icon="������">
Торт печенье лимон мармелад сливки сахарная слива. Какао пудинг сахарная слива клубничный пирог пончик шоколадный яблочный пирог слоёное пироженое мороженое.
</p>
<p style="--item-color: #e2ed53;" data-icon="������">
Шоколадный торт пряники клубничное желе. Яблочный пирог пончик с шоколадной глазурью тарталетки с сыром. Булочка с корицей марципан сахарная слива.
</p>
</body>
</html>