0
Ich erstelle Beispiel wie es war auf Bild (Run Code im Vollbildmodus geschnitten), aber ich frage, ob es der bessere Weg ist, dies zu tun. Wenn ich Webseiten zoome, sehe ich Grenzen von Formen, also kann ich Sechseck in einem Objekt erstellen und Rechteck im Hintergrund hinzufügen.Wie kann ich Hexagon-Form mit Rechteck im Hintergrund erstellen?
Danke für den Hinweis! Beispiel 
.arrow-left {
margin-top: 40px;
width: 0;
height: 0;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;
border-right:80px solid white;
vertical-align: top;
}
.backwhite{
margin-top: 40px;
width: 50%;
height:320px;
background-color: #FFFFFF;
color:#000000;
vertical-align: top;
}
.arrow-left_yellow {
width: 0;
height: 0;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;
border-right:80px solid #FFAA00;
float:right;
}
.arrow-right_yellow {
width: 0;
height: 0;
border-top: 200px solid transparent;
border-bottom: 200px solid transparent;
border-left: 100px solid #FFAA00;
}
.cube {
width: 250px;
height: 400px;
background-color: #FFAA00;
}
.backwhite, .arrow-left,.arrow-left_yellow ,.arrow-right_yellow,.cube{
display: inline-block;
}
.backwhite-text{
float:left;
width: 80%;
}
.backwhite-text >h1{
color:#000000;
text-align: center;
}
.backwhite-text>p{
color:#000000;
}
.trapezoid {
vertical-align: top;
margin: 40px 0px;
position: relative;
display: inline-block;
width: 20px;
height: 320px;
background-color: #FFAA00;
color: white;
font-size: 2rem;
}
.trapezoid::before {
content: "";
position: absolute;
top: -40px;
border-top: 40px solid transparent;
border-left: 0 px solid transparent;
border-right: 20px solid #FFAA00;
border-bottom: 111px solid #FFAA00;
}
.trapezoid::after {
content: "";
position: absolute;
bottom: -40px;
border-bottom: 40px solid transparent;
border-left: 0px solid transparent;
border-right: 20px solid #FFAA00;
border-top: 111px solid #FFAA00;
}
#single-project{
padding-top: 310px;
}<div id="single-project">
<div class="arrow-left"></div><div class="backwhite"> <div class="backwhite-text"><h1>H1 H1 H1 H1</h1><p>TextText</p></div><div class="arrow-left_yellow"></div></div><div class="trapezoid"></div><div class="cube"></div><div class="arrow-right_yellow"></div>
</div>
Hier ist eine Anleitung zum Erstellen von Formen mit CSS: https://css-tricks.com/examples/ShapesOfCSS/ – Andrew
Danke, aber ich brauche ein weißes Rechteck im Hintergrund des Sechsecks, was passiert ist mit Z-Index. Antwort unten. :) – GrofMonteCristo