带有背景图像的多边形 div 的边界（在 CSS 中有剪辑路径）

Question

我有一个简单的 100vw-100vh 页面，其中 3 张图片用于移动设备背景，另外 5 张图片用于更大视口的不同设置。到目前为止我的设置方式：

3（或 5）div 个容器，在 CSS
设置为CSS中每个容器的背景图片，背景尺寸：封面。

这可以很好地显示图像，但是当我尝试向容器添加边框时，剪裁的边不会得到边框，只有“原始”位会（如矩形的边裁剪前）。

有没有办法把它们全部加起来？

注意：我玩过background-origin没有结果。整个页面设置了 box-sizing: border-box;但它似乎也不影响结果。

我的代码的 Codepen，适用于下面的移动版本（3 张图片）。

非常感谢您的帮助！

PS：我看过几篇在一定程度上与主题相关的帖子，但背景图片设置方式不同，因为它们都是有点旧我认为更广泛的浏览器支持可能有助于#hope。对不起，我会错过任何冗余！

https://codepen.io/aguafresca/pen/abNvyXO?editors=1100

<body> <main>
  <welcome-page>    
    <contacto-link>
      <p>contact details</p>
      </contacto-link>
    </welcome-page>

<background-container id="cont1" class=""></background-container>
<background-container id="cont2" class=""></background-container>
<background-container id="cont3"></background-container>

</main> </body>

CSS:

/* general set-up */
html {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}
*, *:before, *:after, a, main, body {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
    
/* setting-up the background */
welcome-page {
  z-index: 2;
  height: 100vh;
  width: 100vw;
  position: absolute;
  top:0;
  left:0;
  background-color: rgba(255, 255, 255, 0.3);
}
background-container {
  display: block;
  z-index: 1;
  position: absolute;
  background-color: dimgray;
  background-size: cover;
  border: red solid 3px;
  background-origin: content-box;
}
#cont1 {
    top: 0;
    left: 0;
    height: 60vh;
    width: 70vw;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    background-image: url("https://images.unsplash.com/photo-1596072181334-1adc75da7717?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
  }
  #cont2 {
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    clip-path: polygon(70% 0, 100% 0, 100% 40%, 30% 100%, 0 100%, 0 60%);
    background-image: url("https://images.unsplash.com/photo-1595680337986-ce4862b497b9?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
  }
  #cont3 {
    bottom: 0;
    right: 0;
    height: 60vh;
    width: 70vw;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    background-image: url("https://images.unsplash.com/photo-1595035848637-29bd22af4faf?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
    border-color: green;
    z-index:10;
  }

/* footer format */
contacto-link {
  display: block;
  position: fixed;
  bottom: 0;
  height: 5vh;
  width:100vw;
  line-height: 5vh;
  background-color: rgba(255, 255, 255, 0.8);
  color: dimgrey;
}

Answer 1

您可以考虑使用额外的包装器 drop-shadow 来模拟边框。

这里是一个例子，我不会真的和一个额外的包装器，但我会为图像使用伪元素：

body {
  margin: 3px;
  height: calc(100vh - 6px);
  position: relative;
}

.background-container {
  z-index: 1;
  position: absolute;
  filter:
    drop-shadow(0px 3px 0px red) 
    drop-shadow(3px 0px 0px red) 
    drop-shadow(0px -3px 0px red) 
    drop-shadow(-3px 0px 0px red)
}

.background-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
}

#cont1 {
  top: 0;
  left: 0;
  height: 60%;
  width: 70%;
}

#cont1::before {
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background-image: url("https://picsum.photos/id/10/800/800");
}

#cont2 {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index:2;
}

#cont2::before {
  clip-path: polygon(70% 0, 100% 0, 100% 40%, 30% 100%, 0 100%, 0 60%);
  background-image: url("https://picsum.photos/id/1011/800/800");
}

#cont3 {
  bottom: 0;
  right: 0;
  height: 60%;
  width: 70%;
}

#cont3::before {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background-image: url("https://picsum.photos/id/1074/800/800");
}

<div class="background-container" id="cont1"></div>
<div class="background-container" id="cont2"></div>
<div class="background-container" id="cont3"></div>

并且颜色不同：

body {
  margin: 3px;
  height: calc(100vh - 6px);
  position: relative;
}

.background-container {
  z-index: 1;
  position: absolute;
  filter:
    drop-shadow(0px 3px 0px var(--c,red)) 
    drop-shadow(3px 0px 0px var(--c,red)) 
    drop-shadow(0px -3px 0px var(--c,red)) 
    drop-shadow(-3px 0px 0px var(--c,red))
}

.background-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
}

#cont1 {
  top: 0;
  left: 0;
  height: 60%;
  width: 70%;
  --c:blue;
}

#cont1::before {
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background-image: url("https://picsum.photos/id/10/800/800");
}

#cont2 {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index:2;
}

#cont2::before {
  clip-path: polygon(70% 0, 100% 0, 100% 40%, 30% 100%, 0 100%, 0 60%);
  background-image: url("https://picsum.photos/id/1011/800/800");
}

#cont3 {
  bottom: 0;
  right: 0;
  height: 60%;
  width: 70%;
  --c:yellow;
}

#cont3::before {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background-image: url("https://picsum.photos/id/1074/800/800");
}

<div class="background-container" id="cont1"></div>
<div class="background-container" id="cont2"></div>
<div class="background-container" id="cont3"></div>

带有背景图像的多边形 div 的边界（在 CSS 中有剪辑路径）

Borders of divs shaped as a polygon (with clip-path in CSS) with a background image

html

css

image

border

clip-path