在css中有三角形邊的矩形

考慮到深灰色部分是坐在下面的元素，圖像中的金色形狀如何才能用css專門繪製？在css中有三角形邊的矩形

這是我到目前爲止的代碼：

.Header--wrapper { 
    position: relative; 
    background-color: #42424C; 
} 

.Header--start-small { 
    width: 25%; 
    position: absolute; 
    background-color: #BCB097; 
    color: white; 
    margin-top: -10px; 
    margin-left: 15px; 
    padding-bottom: 57px; 
    display: inline-block; 
}

<div className="Header--wrapper"> 
    <div className="Header--start-small"></div> 
</div>

來源

2017-08-02 feychou

顯示您的HTML代碼。你嘗試過什麼嗎？ – blonfu

我添加了html和css代碼。不過，我只需要指導如何創建這種角度，我不需要現有代碼的幫助。 – feychou

@feychou如果你得到一個灰色的三角形，重疊金色的直線是這樣嗎？ –

#container { 
 
    height: 80px; 
 
    width: 300px; 
 
    background: #ebebeb; 
 
} 
 

 
#container:before { 
 
    content: " "; 
 
    display: inline-block; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 40px 0 40px 20px; 
 
    border-color: #ebebeb #ebebeb #ebebeb white; 
 
}

<div id="container"></div>

注意，您可以調整的深度，通過改變最後的切出值在border-width相對到其他值

來源

2017-08-02 12:07:36 sideroxylon

請參閱吹碼，我有更新CSS和HTML。

.Header--wrapper { 
 
    position: relative; 
 
    background-color: #BCB097; 
 
    height: 40px; 
 
    overflow: hidden; 
 
} 
 

 
.Header--start-small { 
 
width: 25%; 
 
position: absolute; 
 
background-color: #42424C; 
 
color: white; 
 
margin-top: -10px; 
 
margin-left: 0px; 
 
padding-bottom: 57px; 
 
display: inline-block 
 
} 
 
.Arrow{ 
 
width: 0; 
 
height: 0; 
 
border-style: solid; 
 
border-width: 20px 0 20px 10px; 
 
border-color: transparent transparent transparent #42424c; 
 
display: inline-block; 
 
left: 25%; 
 
position: absolute; 
 
}

<div class="Header--wrapper"> 
 
    <div class="Header--start-small"></div><div class="Arrow"></div> 
 
</div>

來源

2017-08-02 13:11:30

在css中有三角形邊的矩形

回答

相關問題