в адаптиве очень плохо смотрится, даже на 1050 сьежает
.container {
padding: 0 30px;
margin: 0 auto;
max-width: 1190px;
}
.wrap {
display: flex;
margin: 0 -12px;
}
.item {
margin: 0 12px;
background-color: #eee;
padding: 20px;
padding-bottom: 108px;
}
.item {
position: relative;
}
.item:nth-child(even):before {
position: absolute;
content: ' ';
bottom: 14px;
left: 0px;
width: 100%;
height: 65px;
background-position: left -445px bottom;
background-repeat: no-repeat;
background-size: cover;
background-image: url('https://svgshare.com/i/_Xm.svg');
}
.item:nth-child(odd):before {
position: absolute;
content: ' ';
bottom: 14px;
left: 0px;
width: 100%;
height: 65px;
background-repeat: no-repeat;
background-size: cover;
background-position: left -220px bottom;
background-image: url('https://svgshare.com/i/_Xm.svg');
}
.item:first-child:after {
position: absolute;
content: ' ';
bottom: 38px;
left: 40px;
width: 48px;
height: 48px;
border-radius: 50%;
background-color: #c8d1f2;
background-image: url('https://svgshare.com/i/_Xm.svg');
background-position: center;
background-repeat: no-repeat;
}
.item:first-child:before {
position: absolute;
content: ' ';
bottom: 14px;
left: 88px;
width: calc(100% - 88px);
height: 65px;
background-image: url('https://svgshare.com/i/_Xm.svg');
background-position: left 10px bottom;
background-repeat: no-repeat;
background-size: cover;
}
* {
box-sizing: border-box;
}
*:after, *:before {
box-sizing: border-box;
}
<div class="container">
<div class="wrap">
<div class="item">
<h3>title 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum debitis inventore suscipit pariatur, rem distinctio consectetur sequi. Voluptates laborum eos dicta laboriosam quia cupiditate rem beatae non, debitis laudantium enim?</p>
</div>
<div class="item">
<h3>title 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum debitis inventore suscipit pariatur, rem distinctio consectetur sequi. Voluptates laborum eos dicta laboriosam quia cupiditate rem beatae non, debitis laudantium enim?</p>
</div>
</div>
</div>