https://i.sstatic.net/d3GEw.jpg
There seems to be an issue with the border being hidden. I've tried adjusting the background-position
variables, but without success.
Here is a code example:
* {
margin: 0;
padding: 0;
}
.container {
max-width: 1170px;
width: 100%;
margin: 0 auto;
padding: 0 15px;
}
.item_wrapper {
display: flex;
justify-content: space-between;
}
.items {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 270px;
background-image: url(https://svgshare.com/i/6MZ.svg);
min-height: 270px;
background-size: cover;
background-repeat: no-repeat;
padding: 0 20px;
}
<div class="container">
<div class="item_wrapper">
<div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, voluptas dicta aut hic dolorum quam ex consequuntur esse vel cum voluptatem tempora expedita molestias optio necessitatibus reiciendis asperiores odio blanditiis!</div>
<div class="items">Tenetur minus cumque enim est in aliquam quam blanditiis obcaecati quae aut quis, ratione rerum facere accusantium? Quos eum, sequi odit exercitationem beatae iusto fugiat maxime nulla a laboriosam rem!</div>
<div class="items">Necessitatibus voluptatum quisquam placeat. Provident quo ut autem voluptatibus assumenda odit maxime rerum! Porro vitae omnis nemo eveniet aspernatur, iste veniam placeat repudiandae. Ab exercitationem non eligendi hic doloremque accusantium?</div>
<div class="items">Id voluptas architecto quisquam nobis. Nisi, dicta, deleniti maxime atque aperiam, fuga reprehenderit cum ex numquam voluptatum totam? Quisquam fugit numquam accusantium temporib...</div>
</div>
</div>
P.S. In the above example, the bottom border remains hidden.