我正在做一个布局，有两个绝对位置的元素，它们的位置完全相同。其中一个元素必须被一个容器截断，而另一个元素将在该容器外可见。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>做不同的依靠背景，其中的技巧是用 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>也像下面一样，你必须调整 background-position 子女的名字与父母的名字相匹配。
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>