带有背景图像的多边形的 div 边框（在 CSS 中使用剪辑路径）答案

【问题标题】：Borders of divs shaped as a polygon (with clip-path in CSS) with a background image带有背景图像的多边形的 div 边框（在 CSS 中使用剪辑路径）
【发布时间】：2020-12-01 13:26:07
【问题描述】：

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

3（或 5）个 div 容器，在 CSS 中裁剪为多边形
在 CSS 中设置为每个容器的 background-image 的图像，背景大小为：cover。

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

有没有办法将它们全部添加？

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

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

非常感谢您的帮助！

PS：我已经看到了一些与该主题相关的帖子，但背景图像设置方式不同，而且由于它们都有些旧，我认为更广泛的浏览器支持可能帮助#希望。对不起，我会错过任何冗余！

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;
}

【问题讨论】：

标签： html css image border clip-path

【解决方案1】：

使用额外的包装器，您可以考虑使用阴影来模拟边框。

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

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>

【讨论】：

非常感谢您的提示、详细和超级有用的回答 Temani！它在我的代码中完全解决了！祝您度过愉快的一周