0
Я создаю пример, как это было на картинке (код запуска отключен в полноэкранном режиме), но я спрашиваю, есть ли у него лучший способ сделать это. Если я масштабирую веб-страницу, я вижу границы форм, поэтому я могу создать шестиугольник в одном объекте и добавить прямоугольник в фоновом режиме.Как я могу создать форму шестиугольника с прямоугольником в фоновом режиме?
Спасибо за совет! Пример 
.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>
вот руководство по созданию фигур с CSS: https://css-tricks.com/examples/ShapesOfCSS/ – Andrew
Спасибо, но мне нужен белый прямоугольник в фоне шестиугольника, что происходит с z-индексом. Ответ ниже. :) – GrofMonteCristo