英雄 slider 上的列之间有斜边的行

Question

I'm currently working on my app's landing page. I want to make something similar with this sketch I've drew: https://imgur.com/DCi5ueM

The round border of "OR" it's not a must, I'm more focused on the oblique one right now.

Is there a way to achieve it through CSS or even something else?

So far I've made the hero section, column layout and the slider with owlCarousel, but I'm stuck on making that oblique line. I've seen some tutorials around and tried tweaking them to fit my needs but couldn't make it.

    <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;    
}

Here's a jsfiddle of what I've accomplished so far: https://jsfiddle.net/8sLaqjb1/

I don't know how to make the border oblique as well as making the images as wide as the oblique will allow(different width for both top and bottom I guess)

Answer 1

I played a little with your Fiddle, it is a fun challenge. What I did may not be not perfect... but it's a start.

In the HTML markup, I removed the col-md-2 my-auto classes from the .divider-column div. I also made the .content divs siblings of the skewed images.

I changed a lot in your CSS where the main changes are about the use of transform: skew() and transform: translate() .

 $(document).ready(function() { var owl; owl = $('.home-carousel').owlCarousel({ loop: true, margin: 0, nav: false, dots: false, autoplay: true, autoplayTimeout: 7500, smartSpeed: 750, items: 1 }); // Reset timer on action owl.on('changed.owl.carousel', function(e) { owl.trigger('stop.owl.autoplay'); owl.trigger('play.owl.autoplay'); }); });

 body { margin: 0; padding: 0; box-sizing: border-box; background-color: #121212; color: #FFFFFF; min-height: 200vh; }.hc-item { min-height: 100vh; height: 100vh; background: black /*wheat;*/ /* CHANGED */ }.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'); /* ADDED */ transform: skew(0,-40deg) translateY(-150vh); height: 200vh; }.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'); /* ADDED */ transform: skew(0,-40deg) translateY(-150vh) translateY(6px); height: 200vh; } /* CHANGED */.left-content { position: fixed; top: 13vh; left: 4%; } /* CHANGED */.right-content { position: fixed; bottom: 10vh; right: 2%; }.left-column, .right-column { overflow: hidden; margin: 0; padding: 0; object-fit: cover; background-size: cover; background-position: center; background-repeat: no-repeat; } /* ADDED */.divider-column h2{ position: absolute; z-index: 10; box-sizing: border-box; top: calc(50vh - 1rem - 8px - 0.3em); left: calc(50vw - 1rem - 8px - 0.3em); border-radius: 100%; border: 4px solid black; padding: 0.3em; background: white; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>trIP Records</title> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min:css" integrity="sha512-oc9+XSs1H243/FRN9Rw62Fn8EtxjEYWHXRvjS43YtueEewbS6ObfXcJNyohjHqVKFPoXXUxwc+q1K7Dee6vv9g==" crossorigin="anonymous" /> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min:css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" /> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" /> </head> <body> <section> <div class="owl-carousel owl-theme home-carousel"> <div class="hc-item row w-100 p-0 m-0"> <div class="col-md-5 left-column"></div> <div class="left-content"> <h2 class="text-center">Lorem ipsum dolor.</h2> <button class="btn btn-outline-warning d-flex mx-auto">View more</button> </div> <div class="divider-column"> <h2 class="text-center">OR</h2> </div> <div class="col-md-5 right-column"></div> <div class="right-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> </section> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min:js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min:js" integrity="sha512-8qmis31OQi6hIRgvkht0s6mCOittjMa9GMqtK9hes5iEQBQE/Ca6yGE5FsW36vyipGoWQswBj/QBm2JR086Rkw==" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script> </body> </html>

The result in the above snippet is so-so... The best is to check the Fiddle and try resizing...