Saya membuat tata letak yang memiliki dua elemen posisi mutlak yang diposisikan persis sama. Satu harus dipotong oleh wadah, sedangkan elemen lainnya akan terlihat di luar wadah tersebut. overflow: hidden tidak akan berfungsi karena wadah harus position:staticagar kedua elemen absolut akan diposisikan relatif terhadap induk yang sama. Oleh karena itu, saya telah menggunakan clip-path: inset(0 0 0 0) yang berfungsi dengan baik untuk semua browser yang saya khawatirkan, kecuali untuk Edge (pre-chromium). Saya menyembunyikan efek untuk IE.

Setiap saran untuk solusi yang akan bekerja untuk Edge juga akan dihargai.

body{
  padding: 100px;
  position: relative;
  margin: 0;
}
.container{
  position: static;
  max-width: 1280px;
  padding: 100px;
  background: lightblue;
/*   height: 500px; */
  clip-path: inset(0 0 0 0);
}
.swoop{
  position: absolute;
  top: 0;
  right: 0;
}
.col{
  width: 40%;
}
<body>
  <img class="swoop swoop-90-y" src="https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/covid/swoop-90deg-yellow.svg" alt="Yellow swooping stripe" srcset="">
  <div class="container">
    <img class="swoop swoop-90-y pos-abs " src="https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/covid/swoop-90deg-white.svg" alt="Yellow swooping stripe" srcset="">
      <div class="col">
        <h1>Hello world</h1>
        <p>Fusce pellentesque, leo vel posuere volutpat, erat ligula cursus metus, sed blandit dui ligula eu erat. Mauris aliquam nec sem in tincidunt. Quisque ultrices quam eget eros elementum, nec venenatis mauris varius. Sed blandit rhoncus augue id vehicula. Nulla sapien nulla, maximus in ornare et, condimentum a turpis. In vel tristique ligula. Morbi id massa quis nisi imperdiet semper. Nam convallis ut risus id tristique. Praesent tempus aliquam magna a consequat.</p>
        </div>
  </div>
1
E-video 16 Juni 2020, 17:30

1 menjawab

Jawaban Terbaik

Lakukan secara berbeda bergantung pada latar belakang di mana triknya adalah menggunakan background-attachment:fixed

body {
  padding: 100px;
  position: relative;
  margin: 0;
  background: 
   url(https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/covid/swoop-90deg-yellow.svg) 
   top right fixed no-repeat;
}

.container {
  max-width: 1280px;
  padding: 100px;
  background: 
   url(https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/covid/swoop-90deg-white.svg) 
   top right fixed no-repeat, 
   lightblue;
}

.col {
  width: 40%;
}
<div class="container">
    <div class="col">
      <h1>Hello world</h1>
      <p>Fusce pellentesque, leo vel posuere volutpat, erat ligula cursus metus, sed blandit dui ligula eu erat. Mauris aliquam nec sem in tincidunt. Quisque ultrices quam eget eros elementum, nec venenatis mauris varius. Sed blandit rhoncus augue id vehicula.
        Nulla sapien nulla, maximus in ornare et, condimentum a turpis. In vel tristique ligula. Morbi id massa quis nisi imperdiet semper. Nam convallis ut risus id tristique. Praesent tempus aliquam magna a consequat.</p>
    </div>
  </div>

Juga seperti di bawah ini di mana Anda harus menyesuaikan background-position anak agar sesuai dengan salah satu orang tua

body {
  position: relative;
  margin: 0;
}

.container {
  max-width: 1280px;
  padding:80px;
  background: 
   url(https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/covid/swoop-90deg-yellow.svg) 
   calc(50% + 200px) 0 no-repeat;
}

.col {
  padding: 100px;
  width:50%;
  margin:auto;
  background: 
   url(https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/covid/swoop-90deg-white.svg) 
   calc(50% + 200px) -80px no-repeat, 
   lightblue;
}
<div class="container">
    <div class="col">
      <h1>Hello world</h1>
      <p>Fusce pellentesque, leo vel posuere volutpat, erat ligula cursus metus, sed blandit dui ligula eu erat. Mauris aliquam nec sem in tincidunt. Quisque ultrices quam eget eros elementum, nec venenatis mauris varius. Sed blandit rhoncus augue id vehicula.
        Nulla sapien nulla, maximus in ornare et, condimentum a turpis. In vel tristique ligula. Morbi id massa quis nisi imperdiet semper. Nam convallis ut risus id tristique. Praesent tempus aliquam magna a consequat.</p>
    </div>
  </div>
  
  <div class="container">
    <div class="col">
      <h1>Hello world</h1>
      <p>Fusce pellentesque, leo vel posuere volutpat, erat ligula cursus metus, sed blandit dui ligula eu erat. Mauris aliquam nec sem in tincidunt. Quisque ultrices quam eget eros elementum, nec venenatis mauris varius. Sed blandit rhoncus augue id vehicula.
        Nulla sapien nulla, maximus in ornare et, condimentum a turpis. In vel tristique ligula. Morbi id massa quis nisi imperdiet semper. Nam convallis ut risus id tristique. Praesent tempus aliquam magna a consequat.</p>
    </div>
  </div>
1
Temani Afif 19 Juni 2020, 14:33