隐藏静态元素的溢出（Clip-path problem w/ Edge）

Question

我正在制作一个布局，其中包含两个位置完全相同的绝对位置元素。一个必须被容器切断，而另一个元素将在所述容器外可见。 overflow: hidden 将不起作用，因为容器必须是 position:static，以便两个绝对元素都相对于同一父元素定位。因此，我使用了 clip-path: inset(0 0 0 0)，它适用于我关心的所有浏览器，但 Edge（chromium 之前的版本）除外。我隐藏了 IE 的效果。

对于适用于 Edge 的解决方案的任何建议，我们将不胜感激。

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>

Answer 1

根据背景做不同的事情，技巧是使用 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>

也像下面一样，您必须调整 child 的 background-position 以匹配 parent

之一

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>

隐藏静态元素的溢出（Clip-path problem w/ Edge）

Hiding the overflow of a static element (Clip-path problem w/ Edge)

css

svg

layout

clip-path