div {
display:inline-block;
position: relative;
width: 256px;
height: 140px;
margin-right:32px;
background: url('/my-image.jpg') no-repeat rgb(15,150,196);
overflow: hidden;
}
div::before, div::after {
content: '';
position: absolute;
left: 0;
display: block;
width: calc(100% - 12px);
height: 100%;
border-width: 3px 6px;
border-style: solid;
border-color: rgb(178,178,178);
border-radius: 9px;
box-shadow: 36px -36px 0 36px rgb(178,178,178), -2px 2px 0 2px rgb(178,178,178);
transform: skewY(11deg);
}
div::before {
bottom: 50%;
}
div::after {
top: 50%;
box-shadow: -36px 36px 0 36px rgb(178,178,178), 2px -2px 0 2px rgb(178,178,178);
}
.with-image {
background: url('https://images.pexels.com/photos/115045/pexels-photo-115045.jpeg?w=940&h=650&auto=compress&cs=tinysrgb') no-repeat 0 0/256px 140px rgb(15,150,196);
}
.with-image::before, .with-image::after {
border-color: rgb(0,127,0);
box-shadow: 36px -36px 0 36px rgb(0,127,0), -2px 2px 0 2px rgb(0,127,0);
}
.with-image::after {
box-shadow: -36px 36px 0 36px rgb(0,127,0), 2px -2px 0 2px rgb(0,127,0);
}
<div></div>
<div class="with-image"></div>
那么你的建议解决方案有什么问题? – Turnip
如果你可以使用SVG很好。但对于CSS + HTML来说,这很难实现,因为你需要倾斜转换,并且你会遇到文本问题等。你是否在图层上尝试了一个图像? –