分割具有 3D 厚度效果的背景图像

Question

我想拆分背景图片。例如像这样的原始图像

我想要这样的效果：

这是我的代码

<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 相同的厚度效果。

Answer 1

此答案仅提供单元素解决方案

2D 解决方案是仅使用伪元素 :before 和 :after 来模拟间隙。你只需要 position them and give them the proper distance to the border with calc().

为了让它看起来更立体，你可以使用 transform perspective() 结合 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中添加一个border-left，在伪元素中添加一个border-right。再加上白色的上下边框，右边框半透明，伪元素甚至给人一种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, 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, 0, 0.5);
}
div:before {
  left: calc(33% - 7px);
}
div:after {
  right: calc(33% - 7px);
}

<div></div>

Answer 2

这里有一个3D的方法，可以把图片分成3部分，做出厚度效果。它响应迅速并依赖于：

图像旋转和厚度效果的 3d 变换
"padding technique"保持元素的纵横比
伪元素使图像的每个部分的thikness
背景图像和背景位置

3d rotated and thick image.

的演示

输出：

body{perspective:1000px;}
.imgWrap{
  position:relative;
  width:90%;
  margin:5% auto;
  padding-bottom:39%;
  transform: rotateY(25deg);
  transform-style:preserve-3d;
}
.imgWrap > div{
  position:absolute;
  top:0;
  width:30.3%;height:100%;
  float:left;
  background-image:url('http://i.imgur.com/FhZxJJp.jpg');
  background-size:auto 100%;
  transform-style:preserve-3d;
  outline: 1px solid transparent; /* prevent jagged edges in firefox */
}
.imgWrap .left  { left: 0;     background-position:   3% 0; }
.imgWrap .center{ left:34.83%; background-position: -97% 0; }
.imgWrap .right { left:69.66%; background-position:-197% 0; }
.imgWrap > div:before{
  content:'';
  position:absolute;
  top:0;right:100%;
  width:10%; height:100%;
  background:inherit;
  transform-origin:100% 50%;
  transform:rotateY(-90deg);
}
.imgWrap .left:before  { background-position:     0%   0; }
.imgWrap .center:before{ background-position: -1001.3% 0; }
.imgWrap .right:before { background-position: -2001.4% 0; }

<div class="imgWrap">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

请注意，您需要为浏览器支持添加供应商前缀。有关详细信息，请参阅 canIuse。

Answer 3

这是另一个依赖于一个元素的解决方案。

想法是使用多个背景在初始图像之上创建不同的图层，以便：

使用白色（或与主背景相同的颜色）在图像的每个部分之间创建间隙。
为每个部分创建阴影。
使用透明颜色创建厚度效果。

然后我们做一个透视的旋转，为了有3D的错觉。

body {
  perspective: 1000px;
  max-width:600px;
}

.box {
  margin: 20px;
  width:400px;
  height:200px;
  border-left:20px solid transparent;
  transform: rotateY(25deg);
  transform-style: preserve-3d;
  background:
  /*
    1: The bottom shadow
    2: A small triangle at the bottom left corner for the 3D effect
    3: A small triangle at the top    left corner for the 3D effect
    4: The left side shadow
    5: White color to create the separation between each part
  */
  
  /* First part */
  /*1*/ linear-gradient(24deg,transparent 54%,#aaa 57%)          0px  100%/30px 16px border-box border-box,
  /*2*/ linear-gradient(to bottom left,transparent 50%,#fff 52%) 10px 100%/8px 3px,
  /*3*/ linear-gradient(to top left,transparent 50%,#fff 52%)    10px 0   /8px 3px,
  /*4*/ linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5))         10px 0   /8px 100%,
  /*5*/ linear-gradient(#fff,#fff)                               0 0      /10px 100%,
  /* Second part */
  /*1*/ linear-gradient(30deg,transparent 35%,#aaa 51%)          130px 100%/10px 16px,
  /*2*/ linear-gradient(to bottom left,transparent 50%,#fff 52%) 140px 100%/8px  3px,
  /*3*/ linear-gradient(to top left,transparent 50%,#fff 52%)    140px 0   /8px  3px,
  /*4*/ linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5))         140px 0   /8px  100%,
  /*5*/ linear-gradient(#fff,#fff)                               130px 0   /10px 100%,
  /* Third part */
  /*1*/ linear-gradient(30deg,transparent 35%,#aaa 51%)          260px 100%/10px 16px,
  /*2*/ linear-gradient(to bottom left,transparent 50%,#fff 52%) 270px 100%/8px  3px,
  /*3*/ linear-gradient(to top left,transparent 50%,#fff 52%)    270px 0   /8px  3px,
  /*4*/ linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5))         270px 0   /8px  100%,
  /*5*/ linear-gradient(#fff,#fff)                               260px 0   /10px 100%,
  /* Main background */
  url(https://picsum.photos/400/200/?image=1015) 0 0/cover;
 background-repeat:no-repeat;
}

<div class="box" >
</div>

为了更好地理解拼图，请为每个渐变使用不同的颜色：

body {
  perspective: 1000px;
  max-width:600px;
}

.box {
  margin: 20px;
  width:400px;
  height:200px;
  border-left:20px solid transparent;
  transform: rotateY(25deg);
  transform-style: preserve-3d;
  background:
  /*
    1: The bottom shadow
    2: A small triangle at the bottom left corner for the 3D effect
    3: A small triangle at the top    left corner for the 3D effect
    4: The left side shadow
    5: White color to create the separation between each part
  */
  
  /* First part */
  /*1*/ linear-gradient(24deg,transparent 54%,red 57%)           0px  100%/30px 16px border-box border-box,
  /*2*/ linear-gradient(to bottom left,transparent 50%,blue 52%) 10px 100%/8px 3px,
  /*3*/ linear-gradient(to top left,transparent 50%,black 52%)   10px 0   /8px 3px,
  /*4*/ linear-gradient(pink,pink)                               10px 0   /8px 100%,
  /*5*/ linear-gradient(green,green)                             0 0      /10px 100%,
  /* Second part */
  /*1*/ linear-gradient(30deg,transparent 35%,red 51%)           130px 100%/10px 16px,
  /*2*/ linear-gradient(to bottom left,transparent 50%,blue 52%) 140px 100%/8px  3px,
  /*3*/ linear-gradient(to top left,transparent 50%,black 52%)   140px 0   /8px  3px,
  /*4*/ linear-gradient(pink,pink)                               140px 0   /8px  100%,
  /*5*/ linear-gradient(green,green)                             130px 0   /10px 100%,
  /* Third part */
  /*1*/ linear-gradient(30deg,transparent 35%,red 51%)           260px 100%/10px 16px,
  /*2*/ linear-gradient(to bottom left,transparent 50%,blue 52%) 270px 100%/8px  3px,
  /*3*/ linear-gradient(to top left,transparent 50%,black 52%)   270px 0   /8px  3px,
  /*4*/ linear-gradient(pink,pink)                               270px 0   /8px  100%,
  /*5*/ linear-gradient(green,green)                             260px 0   /10px 100%,
  /* Main background */
  url(https://picsum.photos/400/200/?image=1015) 0 0/cover;
 background-repeat:no-repeat;
}

<div class="box" >
</div>

您可以使用 mask 优化代码以获得透明度：

body {
  perspective: 1000px;
  max-width:600px;
  background:linear-gradient(to right,pink,yellow);
}

.box {
  margin: 20px;
  width:400px;
  height:200px;
  border-left:30px solid transparent;
  transform: rotateY(25deg);
  transform-style: preserve-3d;
  background:
  /* */
  linear-gradient(30deg,transparent 65%,#aaa 67%)   0  100%/30px 16px border-box border-box,
  linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5))  0 0   /8px 100%,
  /* */
  linear-gradient(30deg,transparent 35%,#aaa 51%)   130px 100%/10px 16px,
  linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5))  140px 0   /8px  100%,
  linear-gradient(#fff,#fff)                        130px 0   /10px 100%,
  /* */
  linear-gradient(30deg,transparent 35%,#aaa 51%)   260px 100%/10px 16px,
  linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5))  270px 0   /8px  100%,
  linear-gradient(#fff,#fff)                        260px 0   /10px 100%,
  
  url(https://picsum.photos/id/1015/400/200) center/cover;
 background-repeat:no-repeat;
  -webkit-mask:
     linear-gradient(30deg,transparent 35%,#fff 51%)  160px 100%/10px 16px,
     linear-gradient(30deg,transparent 35%,#aaa 51%)  290px 100%/10px 16px,
     
     linear-gradient(#fff,#fff) 0     50%/160px calc(100% - 16px),
     linear-gradient(147deg,transparent 21px,#fff 22px) 0 0/160px 8px,
     linear-gradient(30deg,transparent 19px,#fff 20px) 0 100%/160px 8px,
     
     linear-gradient(#fff,#fff) 170px 50%/120px calc(100% - 16px),
     linear-gradient(147deg,transparent 21px,#fff 22px) 140px 0/150px 8px,
     linear-gradient(30deg,transparent 19px,#fff 20px) 140px 100%/150px 8px,
     
     linear-gradient(#fff,#fff) 300px 50%/130px calc(100% - 16px),
     linear-gradient(147deg,transparent 21px,#fff 22px) 270px 0/160px 8px,
     linear-gradient(30deg,transparent 19px,#fff 20px) 270px 100%/160px 8px;
  mask:
     linear-gradient(30deg,transparent 35%,#fff 51%)  160px 100%/10px 16px,
     linear-gradient(30deg,transparent 35%,#aaa 51%)  290px 100%/10px 16px,
     
     linear-gradient(#fff,#fff) 0     50%/160px calc(100% - 16px),
     linear-gradient(147deg,transparent 21px,#fff 22px) 0 0/160px 8px,
     linear-gradient(30deg,transparent 19px,#fff 20px) 0 100%/160px 8px,
     
     linear-gradient(#fff,#fff) 170px 50%/120px calc(100% - 16px),
     linear-gradient(147deg,transparent 21px,#fff 22px) 140px 0/150px 8px,
     linear-gradient(30deg,transparent 19px,#fff 20px) 140px 100%/150px 8px,
     
     linear-gradient(#fff,#fff) 300px 50%/130px calc(100% - 16px),
     linear-gradient(147deg,transparent 21px,#fff 22px) 270px 0/160px 8px,
     linear-gradient(30deg,transparent 19px,#fff 20px) 270px 100%/160px 8px;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

<div class="box" >
</div>

分割具有 3D 厚度效果的背景图像

Split background image with 3D thickness effect

css

jquery

css-transforms

css-shapes