Currently in the process of designing my app's landing page. I have a sketch that I would like to replicate: https://i.sstatic.net/6swcE.jpg
The round border around "OR" is optional, but I am more concerned with the oblique line at the moment.
Is there a way to achieve this effect using CSS or any other method?
So far, I have created the hero section, column layout, and slider with owlCarousel. However, I am struggling with creating the oblique line. I have tried adjusting tutorials to suit my needs, but haven't been successful.
<div class="hc-item row w-100 p-0 m-0">
<div class="col-md-5 left-column">
<div class="content">
<h2 class="text-center">Lorem ipsum dolor.</h2>
<button class="btn btn-outline-warning d-flex mx-auto">View more</button>
</div>
</div>
<div class="col-md-2 my-auto divider-column">
<h2 class="text-center">OR</h2>
</div>
<div class="col-md-5 right-column">
<div class="content">
<h2 class="text-center">Lorem ipsum dolor.</h2>
<button class="btn btn-outline-warning d-flex mx-auto">View more</button>
</div>
</div>
</div>
.hc-item {
min-height: 100vh;
height: 100vh;
background: wheat;
}
.left-column {
background-image: url('https://images.pexels.com/photos/6021588/pexels-photo-6021588.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
}
.right-column {
background-image: url('https://images.pexels.com/photos/33041/antelope-canyon-lower-canyon-arizona.jpg?auto=compress&cs=tinysrgb&h=650&w=940');
}
.left-column .content {
position: absolute;
top: 5%;
left: 10%;
}
.right-column .content {
position: absolute;
bottom: 5%;
right: 10%;
}
.left-column,
.right-column {
overflow: hidden;
margin: 0;
padding: 0;
object-fit: cover;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
To see what I've completed so far, view this jsfiddle: https://jsfiddle.net/8sLaqjb1/
I'm unsure how to create the oblique border as well as adjust the images' width to fit the oblique shape (I assume different widths will be needed for the top and bottom).