백그라운드에서 사각형이있는 육각형 모양을 어떻게 만들 수 있습니까?

Question

그림처럼 (예 : 전체 화면에서 코드 실행) 예를 만들었지 만, 이렇게하는 것이 더 좋은지 묻습니다. 내가 웹 페이지를 확대하면 모양의 경계선이 보입니다. 그래서 한 객체에 육각형을 만들고 배경에 직사각형을 추가 할 수 있습니다.

조언 해 주셔서 감사합니다. 예

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

예. 육각형 개체를 만들고 배경에 직사각형을 추가 할 수 있습니다. z-index 특성을 사용하십시오. 이 기사를 확인하십시오 : https://css-tricks.com/almanac/properties/z/z-index/