我想分割背景图像。例如像这样的原始图像
我想要这样的效果：
这是我的代码
<style>
div{
-webkit-transform: skewY(175deg);
padding: 10px;
margin: 10px;
border: 10px;
background-image: url(Chrysanthemum.jpg);
width: 200px;
height: 200px;
background-origin: content-Box;
}
</style>
<div></div>
但我找不到任何方式如何拆分这个背景与CSS或jQuery相同的厚度效果。
解决方法
此答案仅提供单一元素解决方案
2D解决方案将只是使用伪元素：之前和之后来模拟差距。你只需要position他们，并给他们与calc()的边界适当的距离。
为了使其看起来更加3D，您可以将transform透视()与rotateY()结合使用，而不是skewY()：
div {
position: relative;
-webkit-transform: perspective(1000px) rotateY(30deg);
transform: perspective(1000px) rotateY(30deg);
margin: 50px 10px;
background-image: url(http://placekitten.com/g/600/200);
width: 600px;
height: 200px;
}
div:before,div:after {
content: "";
position: absolute;
top: 0;
width: 10px;
height: 100%;
background: white;
}
div:before {
left: calc(33% - 5px);
}
div:after {
right: calc(33% - 5px);
}
<div></div>
要实现非常简单的3D效果，您可以向div添加一个边框，并将边框右边添加到伪元素。另外应用白色的上下边框并使右边框半透明，伪元素甚至给出3D感觉。不幸的是，主要元素是不可能的。但是在这里你可以至少玩边框透明度。
div {
position: relative;
-webkit-transform: perspective(1000px) rotateY(30deg);
transform: perspective(1000px) rotateY(30deg);
margin: 50px 10px;
background-image: url(http://placekitten.com/g/600/200);
width: 600px;
height: 200px;
background-origin: border-Box;
border-left: 5px solid rgba(0,0.5);
}
div:before,div:after {
content: "";
position: absolute;
top: 0;
width: 0;
height: 100%;
Box-sizing: border-Box;
background: transparent;
border-top: 4px solid white;
border-bottom: 4px solid white;
border-left: 10px solid white;
border-right: 6px solid rgba(0,0.5);
}
div:before {
left: calc(33% - 7px);
}
div:after {
right: calc(33% - 7px);
}
<div></div>
