二つの画像の境界線を斜めにする方法

cssで二つの画像をflexで横並びにし、その境界線を斜めにしたいです。
jqueryでスライドショーを実装しているのでcssを使って実現させたいです。
skewで親要素を20deg回し、子要素のimgを-20degで戻しても、画像の斜度は戻るのですが最初の形のように真っ直ぐ二つに分かれてしまいます。
解決方法を教えていただければと思います。よろしくお願いします。

イメージ

html
1<body>
2  <div class="wrap">
3
4    <div class="top">
5      <div class="top_text">
6        <h2>TEXT</h2>
7        <h3 class="pc">TEXT  TEXT</h3>
8      </div>
9      <div class="top_images">
10
11        <div class="top_image_left">
12          <img src="images/test1.jpg" />
13          <!-- <img src="images/5F76CDF5-342C-414E-8832-E27CB0B530FD.jpeg" />
14          <img src="images/S__1802544_0.jpg" />
15          <img src="images/774D65A6-F24A-4E9F-AE29-32346B99E9E9.jpeg" />
16          <img src="images/537E8ADB-B358-4746-8E80-ADB541A36751.jpeg" />
17          <img src="images/90AA2E9C-0367-4289-9472-30D43D17124D.jpeg" /> -->
18        </div>
19
20        <div class="top_image_right">
21          <img src="images/test2.jpg" />
22          <!-- <img src="images/CF2FEB43-D29A-4234-951D-8EA969ADDD22.jpeg" />
23          <img src="images/B417D45F-AAF9-4966-AB5E-5DDEBE99F630.jpeg" />
24          <img src="images/4C45A149-F3DF-4328-8A3E-6791F0ED92ED.jpeg" />
25          <img src="images/64677AF0-C993-40FE-A460-9D372AECF189.jpeg" />
26          <img src="images/1DFA8F1F-BFC5-4CE1-BA12-C6BA57485D4E.jpeg" /> -->
27        </div>
28      </div>
29      <div class="scrolldown2"><span>Scroll</span></div>
30    </div>
31
32  </div>
33
34  <script src="js/main.js"></script>
35</body>

css
1@charset "utf-8";
2
3html {
4  height: -webkit-fill-available;
5  margin: 0;
6  font-family: 'Klee One', cursive;
7}
8
9body {
10  margin: 0;
11  background-color: #000000;
12  max-width: 100%;
13  min-height: 100vh;
14  /* mobile viewport bug fix */
15  min-height: -webkit-fill-available;
16}
17
18.wrap {
19  margin: 0;
20  width: 100%;
21  min-height: 100%;
22  position: relative;
23  z-index: 0;
24}
25
26a {
27  text-decoration: none;
28}
29
30.top {
31  position: relative;
32  max-width: 100%;
33  height: 100vh;
34}
35
36.top .top_images {
37  position: absolute;
38  display: flex;
39  justify-content: center;
40  width: 100%;
41  height: 100%;
42  background-color: rgba(0,0,0,0.5);
43  background-image: radial-gradient(#111 30%, transparent 31%), radial-gradient(#111 30%, transparent 31%);
44  background-size: 4px 4px;
45  background-position: 0 0, 2px 2px; 
46  overflow: hidden;
47}
48
49.top .top_image_left{
50  width: 100%;
51  height: 100%;
52  position: relative;
53  transform: skew(-20deg);
54  flex: 6;
55}
56
57.top .top_image_right {
58  width: 100%;
59  height: 100%;
60  position: relative;
61  transform: skew(-20deg);
62  flex: 4;
63}
64
65.top .top_image_left img {
66  width: 100%;
67  height: 100%;
68  position: absolute;
69  object-fit: cover;
70  opacity: .3;
71  transform: skew(20deg);
72}
73
74.top .top_image_right img {
75  width: 100%;
76  height: 100%;
77  position: absolute;
78  object-fit: cover;
79  opacity: .3;
80  transform: skew(20deg);
81}
82
83.top .top_text {
84  position: absolute;
85  text-align: center;
86  top: 50%;
87  left: 50%;
88  transform: translateY(-50%) translateX(-50%);
89  z-index: 3;
90}
91
92.top .top_text h2 {
93  color: #fff;
94  font-size: 5vw;
95  letter-spacing: 2px;
96  margin: 0;
97  line-height: 1em;
98}
99
100.top .top_text h3 {
101  color: #fff;
102  font-size: 1.5vw;
103  letter-spacing: 2px;
104  margin: 0;
105  padding-top: 10px;
106  font-size: 400;
107}

java![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022
1'use strict';
2
3$(function() {
4$('.top_image_left img:nth-child(n+2)').hide();
5setInterval(function() {
6  $(".top_image_left img:first-child").fadeOut(2000);
7  $(".top_image_left img:nth-child(2)").fadeIn(2000);
8  $(".top_image_left img:first-child").appendTo(".top_image_left");
9}, 5000);
10});
11
12$(function() {
13$('.top_image_right img:nth-child(n+2)').hide();
14setInterval(function() {
15  $(".top_image_right img:first-child").fadeOut(2000);
16  $(".top_image_right img:nth-child(2)").fadeIn(2000);
17  $(".top_image_right img:first-child").appendTo(".top_image_right");
18}, 5000);
19});

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

回答3件

CSS clip-path で切り取って、空いた隙間をネガティブマージンで重ねればどうでしょう。

css
1.top .top_image_left{
2  width: 100%;
3  height: 100%;
4  position: relative;
5}
6
7.top .top_image_right {
8  width: 100%;
9  height: 100%;
10  position: relative;
11  clip-path: polygon(30vh 0, 100% 0, 100% 100%, 0% 100%);
12  margin-left: -30vh;
13}

Codepen サンプル

投稿2022/04/06 02:37

hatena19

総合スコア34367

svgのclipPathを利用してください

HTML
1<svg width="800" height="600">
2  <clipPath id="clip01">
3    <path d="M 0 300 L 800 0 L 800 600 L 0 600"/>
4  </clipPath>
5  <clipPath id="clip02">
6    <path d="M 0 600 L 800 300 L 800 600 L 0 600"/>
7  </clipPath>
8  <image xlink:href="http://placeimg.com/800/600/animals" />
9  <image xlink:href="http://placeimg.com/800/600/people" clip-path="url(#clip01)" />
10  <image xlink:href="http://placeimg.com/800/600/nature" clip-path="url(#clip02)" />
11</svg>

投稿2022/04/05 00:45

yambejp

総合スコア118024

tenten0114

2022/04/05 10:48

ご回答ありがとうございます！imgを二つ斜めに分けることはできたのですがsvgのclipPathを使った場合画像ごとのスライドショーのやり方がわからないのですが、何か方法はありますか？

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

こうするとどうでしょうか。

css
1    .top .top_image_left {
2      width: 100%;
3      height: 100%;
4      position: relative;
5      transform: skew(-20deg);
6      flex: 6;
7      overflow: hidden;
8    }