Geteiltes Hintergrundbild mit 3D-Dickeneffekt

Question 1

Ich möchte das Hintergrundbild teilen. Zum Beispiel Originalbild wie dieses

und ich möchte einen Effekt wie diesen:

Das ist mein Code

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

Aber ich kann keine Möglichkeit finden, diesen Hintergrund mit CSS oder jQuery mit demselben Dickeneffekt zu teilen.

Question 2

Hier ist ein 3D-Ansatz, um das Bild in 3 Teile zu schneiden und den Dickeneffekt zu erzielen. Es reagiert und stützt sich auf:

3D-Transformationen für die Drehung des Bildes und den Dickeneffekt
die “Padding-Technik”, um das Seitenverhältnis der Elemente beizubehalten

Pseudoelemente, um die Dicke jedes Teils des Bildes zu bestimmen
Hintergrundbild und Hintergrundposition

Demo von a 3D gedrehtes und dickes Bild.

Ausgabe:

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>

Beachten Sie, dass Sie Herstellerpräfixe für die Browserunterstützung hinzufügen müssen. Weitere Informationen finden Sie unter kann ich benutzen.

Question 3

Diese Antwort enthält nur Einzelelementlösungen

Eine 2D-Lösung wäre, nur die Pseudoelemente zu verwenden :before und :after um die Lücken zu imitieren. Sie müssen nur Position ihnen und geben ihnen den richtigen Abstand zur Grenze mit calc().

Damit es mehr 3D aussieht, können Sie verwenden transform perspective() in Kombination mit rotateY() Anstatt von 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>

Um einen sehr einfachen 3D-Effekt zu erzielen, können Sie a hinzufügen border-left zum div und a border-right zu den Pseudoelementen. Indem man zusätzlich einen weißen oberen und unteren Rand anbringt und den rechten Rand halbtransparent macht, vermitteln die Pseudo-Elemente sogar ein 3D-Gefühl. Leider ist das mit dem Hauptelement nicht möglich. Aber hier kann man zumindest mit der Grenztransparenz herumspielen.

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>

Question 4

Hier ist eine andere Lösung, auf die man sich verlassen kann ein Element.

Die Idee ist, mehrere Hintergründe zu verwenden, um verschiedene Ebenen über dem ursprünglichen Bild zu erstellen, um:

Erstellen Sie die Lücke zwischen jedem Teil des Bildes mit weißer Farbe (oder derselben Farbe wie der Haupthintergrund).

Erstellen Sie den Schatten für jeden Teil.
Erstellen Sie den Dickeneffekt, indem Sie eine transparente Farbe verwenden.

Dann machen wir eine Drehung mit Perspektive, um die 3D-Illusion zu haben.

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>

Um das Rätsel besser zu verstehen, verwenden Sie für jeden Farbverlauf unterschiedliche Farben:

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>

Sie können den Code mit optimieren mask Transparenz haben:

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>