台形のような画像を２×２で並べたい

初学者です。

レスポンシブ対応で画像のように並べたいです。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Document</title>
7    <link rel="stylesheet" href="./css/initialize.css" />
8    <link rel="stylesheet" href="./css/common.css" />
9  </head>
10  <body>
11    <div class="wrapper">
12      <ul class="nav-list">
13        <li class="nav-list__item">
14          <a href="">
15            <figure class="nav-list__item__img1">
16              <img src="./images/culture.jpg" alt="" />
17            </figure>
18          </a>
19        </li>
20        <li class="nav-list__item">
21          <a href="">
22            <figure class="nav-list__item__img2">
23              <img src="./images/culture.jpg" alt="" />
24            </figure>
25          </a>
26        </li>
27        <li class="nav-list__item">
28          <a href="">
29            <figure class="nav-list__item__img3">
30              <img src="./images/culture.jpg" alt="" />
31            </figure>
32          </a>
33        </li>
34        <li class="nav-list__item">
35          <a href="">
36            <figure class="nav-list__item__img4">
37              <img src="./images/culture.jpg" alt="" />
38            </figure>
39          </a>
40        </li>
41      </ul>
42    </div>
43    <!-- /.wrapper -->
44  </body>
45</html>
46

scss
1@media screen and (min-width: 580px) {
2  .wrapper {
3    .nav-list {
4      display: flex;
5      flex-wrap: wrap;
6      justify-content: center;
7      .nav-list__item {
8        a {
9          .nav-list__item__img1 {
10            width: 49vw;
11            -webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
12            clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
13            img {
14              width: 100%;
15            }
16          }
17          .nav-list__item__img2 {
18            -webkit-clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
19            clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
20            img {
21              width: 100%;
22            }
23          }
24          .nav-list__item__img3 {
25            width: 49vw;
26            -webkit-clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
27            clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
28            img {
29              width: 100%;
30            }
31          }
32          .nav-list__item__img4 {
33            width: 49vw;
34            -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
35            clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
36            img {
37              width: 100%;
38            }
39          }
40        }
41      }
42    }
43  }
44}
45

自分でやってみて、このようになっています。
レスポンシブに対応できていないのと隙間を埋める方法がわかりません。よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

現状のflexで横並びさせる方法を使うなら、
各要素の幅を大きめに設定して、ネガティブマージンで重ねるようにすればどうでしょうか。

scss
1@media screen and (min-width: 580px) {
2  .wrapper {
3    .nav-list {
4      display: flex;
5      flex-wrap: wrap;
6      justify-content: space-between;
7      .nav-list__item {
8        margin-bottom: -3px;    /* 追加 */
9        a {
10          .nav-list__item__img1 {
11            width: 56vw;        /* 修正 */
12            -webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
13            clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
14            img {
15              width: 100%;
16            }
17          }
18          .nav-list__item__img2 {
19            width: 56vw;        /* 修正 */
20            margin-left: -15vw; /* 追加 */
21            -webkit-clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
22            clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
23            img {
24              width: 100%;
25            }
26          }
27          .nav-list__item__img3 {
28            width: 56vw;        /* 修正 */
29           -webkit-clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
30            clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
31            img {
32              width: 100%;
33            }
34          }
35          .nav-list__item__img4 {
36            width: 56vw;        /* 修正 */
37            margin-left: -15vw; /* 追加 */
38             -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
39            clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
40            img {
41              width: 100%;
42            }
43          }
44        }
45      }
46    }
47  }
48}