如何創建矩形背景的六角形？

我創建的例子就像它在圖片上（運行代碼全屏縮小），但我問是否有更好的方法來做到這一點。如果我放大網頁我看到形狀的邊界，所以我可以在一個對象中創建六邊形並在背景中添加矩形。如何創建矩形背景的六角形？

感謝您的建議！實施例

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

來源

2016-11-17 GrofMonteCristo

這裏是如何使用CSS創建形狀指南：https://css-tricks.com/examples/ShapesOfCSS/ – Andrew

謝謝，但我需要在六邊形的背景中的白色矩形，發生了什麼與Z指數。下面回答。 :) – GrofMonteCristo

是。您可以創建一個六邊形對象並在後臺添加矩形。使用z-index屬性。檢查這篇文章：https://css-tricks.com/almanac/properties/z/z-index/

來源

2016-11-17 10:03:08

太棒了，我做到了。它更適合外觀和使用圖像。謝謝 – GrofMonteCristo

儘管這可能會回答這個問題，但最好在此提供實際信息，而不僅僅是一個鏈接。 [只有鏈接的答案不被認爲是好答案，可能會被刪除]（http://stackoverflow.com/help/deleted-answers）。 –

如何創建矩形背景的六角形？

回答

相關問題