Search code examples
javascripthtmlcssbootstrap-4media-queries

Creating 3 image layout using bs4 or css3

I want to achieve a layout like in my webpage, currently I don't know what it is called. I need need to fix the layout.I have tried using flex box and grid but did'nt achieved the result.

Layout

Please guide me on how to achieve it.

Attaching Code of what I have achieved yet. Achieved Output Current Ouput (Only works withh full size window)

#img {
            clip-path: polygon(0 49%, 100% 10%, 100% 100%, 0% 100%);
            height: 80%;
            width: 50%;
            position: relative;
            margin-top: -1%;
            margin-bottom: -5%;
            left: -25%;
        }

        #img2 {

            clip-path: polygon(0 0, 100% 0, 100% 1%, 0 34%);
            height: 80%;
            width: 50%;
            position: relative;
        }

        #main-image {
            width: 100px;
        }

        .container {
            width: 100%;
        }
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testing</title>
</head>

<body>
    <div class="container row">
        <img src="https://cdn.shopify.com/s/files/1/0243/5991/files/shakiraslide1.png?v=1622003911" alt=""
            id="main-image" class="col-md-6">
        <img src="https://cdn.shopify.com/s/files/1/0243/5991/files/shakiraslide1.png?v=1622003911" alt="" id="img2"
            class="col-md-3">
        <img src="https://cdn.shopify.com/s/files/1/0243/5991/files/shakiraslide1.png?v=1622003911" alt="" id="img"
            class="col-md-3">
    </div>
</body>

</html>

Solution

  • demonstrating earlier comments

    grid or flex is fine, clip-path can finish the job. Put your codes (html/css) to show what you did so far , so we can help from there.

    the elements cut off needs to overlap, but then you will only see parts not cut off. I'll make an answer to show the idea

    img { display:block;height:80%;}
#img {
  clip-path: polygon(0 49%, 100% 10%, 100% 100%, 0% 100%);
 
}

#img2 {
  clip-path: polygon(0 0, 100% 0, 100% 7%, 0 45%);
  position:absolute;
  top:0;
  left:10px;
  right:10px;


}

#main-image {

}

.container {

}
    <!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Testing</title>
</head>

<body>
  <div class="container row">
    <img src="https://cdn.shopify.com/s/files/1/0243/5991/files/shakiraslide1.png?v=1622003911" alt="" id="main-image" class="col-md-6 m-auto">
    <div  class="col-md-6  position-relative m-0">
    <img src="https://cdn.shopify.com/s/files/1/0243/5991/files/shakiraslide1.png?v=1622003911" alt="" id="img2" class="h-100">
    <img src="https://cdn.shopify.com/s/files/1/0243/5991/files/shakiraslide1.png?v=1622003911" alt="" id="img" class="h-100">
    </div>
  </div>
</body>

</html>

    here is a grid version without BS4 https://jsfiddle.net/mh5048py/