使用 bs4 或 css3 创建 3 个图像布局

Question

我想在我的网页中实现一个布局，目前我不知道它叫什么。我需要修复 layout.I 已经尝试使用 flex box 和 grid 但没有达到结果。

Layout

请指导我如何实现它。

附上我已经实现的代码。实现的输出 Current Ouput（仅适用于全尺寸 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>

Answer 1

展示之前的评论

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>

这里是没有BS4的网格版https://jsfiddle.net/mh5048py/

使用 bs4 或 css3 创建 3 个图像布局

Creating 3 image layout using bs4 or css3

html

javascript

css

media-queries

bootstrap-4