div边框，该边框的形状为背景图像的多边形CSS中具有剪切路径

问题描述

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

3个（或5个）div容器，在CSS中被裁剪为多边形
将图像设置为CSS中每个容器的背景图像，背景尺寸：cover。

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

有没有办法在周围添加它们？

注意：我玩背景音乐没有结果。整个页面都使用box-sizing设置：border-box;但这似乎也不会影响结果。

我的代码的密码笔，用于下面的移动版本（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,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% 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,0.8);
  color: dimgrey;
}

解决方法

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

这里是一个示例，在该示例中，我将不会真正使用一个额外的包装，但是我将对图像使用伪元素：

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% 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,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,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>

border clip-path html image

div边框，该边框的形状为背景图像的多边形CSS中具有剪切路径

问题描述

解决方法

相关问答