如何使用CSS

Question

形狀下的紅色邊框創建這個形狀：

我很努力使用CSS3，但所有的時間我沒能做到這一點的形狀。我也嘗試添加border-bottom和border-left。見CSS代碼理解我在做什麼：

#trapezoid { 
 
    background: blue; 
 
    height: 100px; 
 
    width: 100px; 
 
    margin: auto; 
 
} 
 
#trapezoid:before { 
 
    content: ""; 
 
    position: absolute; 
 
    border-top: 50px solid red; 
 
    border-left: 50px solid transparent; 
 
    margin: 50px 0px 0px -50px; 
 
    transform: rotate(0deg); 
 
} 
 
#trapezoid:after { 
 
    content: ""; 
 
    position: absolute; 
 
    border-top: 50px solid red; 
 
    border-right: 50px solid transparent; 
 
    margin: 50px 0px 0px 100px; 
 
    transform: rotate(0deg); 
 
}

<div id="trapezoid"></div>

這個CSS形狀幾乎接近我的要求，但我們不能在擴展區域使用的圖像。請給我建議一些其他方法。 面臨的挑戰是，我要創建相同的佈局，並在地方灰色背景的我已經表現出一定的內容

Answer 1

如果你有一個堅實的背景色試試這個

body { 
 
    background: grey; 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    height: 200px; 
 
    background: url("http://lorempixel.com/1000/300/nature/3"); 
 
    background-size:cover; 
 
} 
 

 
.content { 
 
    height: 100px; 
 
    color: #fff; 
 
} 
 

 
.shape { 
 
    position: relative; 
 
    height: 100px; 
 
    overflow:hidden; 
 
} 
 

 
.shape:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 40%; 
 
    height: 100%; 
 
    background: grey; 
 
    top: 0; 
 
    transform: skew(30deg); 
 
    left: -10%; 
 
} 
 

 
.shape:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 40%; 
 
    height: 100%; 
 
    background: grey; 
 
    top: 0; 
 
    transform: skew(-30deg); 
 
    right: -10%; 
 
}

<div class="container"> 
 
    <div class="content"> 
 
    Contents 
 
    </div> 
 
    <div class="shape"></div> 
 
</div>

Answer 2

使用:before和:after在底部放置2個三角形

#trapezoid { 
 
width: 200px; 
 
height: 100px; 
 
background-color: red; 
 
position: relative; 
 
} 
 
#trapezoid:before { 
 
content: ""; 
 
width: 0; 
 
height: 0; 
 
border-style: solid; 
 
border-width: 0 30px 30px 30px; 
 
border-color: transparent transparent white transparent; 
 
display: block; 
 
transform: rotate(-135deg); 
 
position: absolute; 
 
bottom: -5px; 
 
left: -20px; 
 
} 
 
#trapezoid:after { 
 
content: ""; 
 
width: 0; 
 
height: 0; 
 
border-style: solid; 
 
border-width: 0 30px 30px 30px; 
 
border-color: transparent transparent white transparent; 
 
display: block; 
 
transform: rotate(135deg); 
 
position: absolute; 
 
bottom: -5px; 
 
right: -20px; 
 
}

<div id="trapezoid"></div>

Answer 3

我認爲這樣做會有效果。希望它會適合你。

.main-box{ 
 
    background:#ddd; 
 
    width:300px; 
 
    height:100px; 
 
    display:inline-block; 
 
    position:relative; 
 
    text-align:center; 
 
} 
 
.main-box:after{ 
 
    content:''; 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 70px solid #999; 
 
    border-right: 70px solid transparent; 
 
    position:absolute; 
 
    left:0; 
 
    bottom:0; 
 
} 
 
.main-box:before{ 
 
    content:''; 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 70px solid #999; 
 
    border-left: 70px solid transparent; 
 
    position:absolute; 
 
    right:0; 
 
    bottom:0; 
 
}

<div class="main-box"> #trial</div>

Answer 4

更好地利用一個PNG圖像作爲背景，如果可能的。如果這不是選項，請在兩端創建兩個div，顯示內聯並旋轉它們以創建斜坡，請注意它們的大小。另一種可能性可以在之前的答案中使用，但如果導航欄在頂部粘滯，則看起來不太好。該邊框將隱藏它下面的內容。

Answer 5

根據所需的browser support，您可以使用夾路徑：

#trapezoid { 
 
    background: url(https://upload.wikimedia.org/wikipedia/commons/8/83/Jho_Arce_User_Profile_Image.jpg) no-repeat; 
 
    background-size: cover; 
 
    height: 100px; 
 
    width: 200px; 
 
    margin: auto; 
 
    -webkit-clip-path: polygon(100% 0, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0 0); 
 
    clip-path: polygon(100% 0, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0 0) 
 
} 
 

 
body { 
 
    background: silver; 
 
}

<div id="trapezoid"></div>