GrofMonteCristo GrofMonteCristo - 21 days ago 7
CSS Question

How i can create hexagon shape with rectangle in background?

I create example like it was on picture(run code snipped in full screen), but i ask if its better way to do this. If i zoom webpage i see borders of shapes, so can i create hexagon in one object and add rectangle in background.

Thanks for the advice !
Example
enter image description here



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




Answer

Yes. You can create a hexagon object and add rectangle in the background. Use the z-index property. Check this article: https://css-tricks.com/almanac/properties/z/z-index/