我有一个简单的100vw-100vh页面，其中3个图像在移动设备的背景中，5个图像在较大视口的不同设置中。到目前为止，我的设置方式：
- 3个(或5个(div容器，在CSS中剪裁为多边形
- 在CSS中设置为每个容器的背景图像，背景大小为：cover
这可以很好地显示图像，但当我尝试将边框添加到容器时，剪裁的边不会得到边框，只有"原始的"；位将(如在剪切之前的矩形边中(。
有没有办法把它们都加起来？
注：我玩了背景起源没有结果。整个页面设置有框大小：边框框；但这似乎也不会影响结果。
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;
}
使用额外的包装器，可以考虑放置阴影来模拟边界。
这里有一个例子，我不会真的和一个额外的包装器，但我会为图像使用伪元素：
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>