創建一個三角形格帶有邊框

我在我的網站創建一個三角形格帶有邊框

#corner { 
 
    position: absolute; 
 
    z-index: 999; 
 
    left: 0; 
 
    top: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 50px solid #000; 
 
    border-bottom: 50px solid transparent; 
 
    border-right: 50px solid transparent; 
 
    border-left: 50px solid #000; 
 
}

<div id="corner"></div>

編輯的左上角的三角形 - 我希望它有一個5px的紅色邊框（僅在傾斜側），使三角形和邊框不同的顏色

理想情況下，將有超過頂一個PNG圖片爲好，但我可以把另一個DIV過頂如果需要的話

這是整個頁面角落三角形

來源

2016-07-23 user3550879

我所做的三角形黑色使其可見，然後我想我也有反轉邊框的顏色。但是如果邊框和三角形具有相同的顏色，我不會看到這一點。只要把它做得更大。 – Oriol

請進一步解釋或顯示您的期望輸出。你的問題沒有多大意義。 – 4castle

我很抱歉，對問題的編輯改變了我的要求。我將澄清 – user3550879

我認爲最好的方式來實現你想要的是使用transform財產而不是操縱border甚至可能需要兩個元素和大量不必要的代碼。

看看這個fiddle或以下片段的視覺表示。

段：

#corner { 
 
    /* Dimensions */ 
 
    height: 200px; 
 
    width: 200px; 
 
    
 
    /* Positioning */ 
 
    position: absolute; 
 
    left: -7.5em; 
 
    top: -7.5em; 
 
    z-index: 999; 
 
    transform: rotateZ(-45deg); 
 
    
 
    /* Styling */ 
 
    background-color: red; 
 
    border-bottom: 5px solid #0c0c0c; 
 
}

<div id="corner"></div>

來源

2016-07-23 04:18:02

創建兩個div：

#corner { 
 
    position: absolute; 
 
    z-index: 999; 
 
    left: 0; 
 
    top: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 55px solid #f00; 
 
    border-bottom: 55px solid transparent; 
 
    border-right: 55px solid transparent; 
 
    border-left: 55px solid #f00; 
 
} 
 

 
#corner-inner { 
 
    position: absolute; 
 
    z-index: 999; 
 
    left: -55px; 
 
    top: -55px; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 50px solid #000; 
 
    border-bottom: 50px solid transparent; 
 
    border-right: 50px solid transparent; 
 
    border-left: 50px solid #000; 
 
}

<div id="corner"> 
 
    <div id="corner-inner"></div> 
 
</div>

來源

2016-07-23 03:19:32

以下我認爲這是最好的迴應，我只需要把一個標誌，以及我不想堆疊到很多div – user3550879

是的，到目前爲止...我認爲這是簡單的，因爲它正在磨合。我無法工作如何以任何其他方式做到這一點。 – 2016-07-23 03:37:12

你甚至可以嘗試僞元素:before和:after。

#corner { 
 
    position: absolute; 
 
    z-index: 1; 
 
    left: 0; 
 
    top: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 50px solid #000; 
 
    border-bottom: 50px solid transparent; 
 
    border-right: 50px solid transparent; 
 
    border-left: 50px solid #000; 
 
} 
 
#corner:before{ 
 
    content:""; 
 
    position:absolute; 
 
    border-top: 5px solid red; 
 
    border-left: 5px solid red; 
 
    top:-50px; 
 
    left:-50px; 
 
    width:92px; 
 
    height:92px; 
 
} 
 
#corner:after{ 
 
    content:""; 
 
    position:absolute; 
 
    border-right: 5px solid red; 
 
    top:-104px; 
 
    left:-83px; 
 
    width:93px; 
 
    height:140px; 
 
    transform:rotate(45deg); 
 
}

<div id="corner"></div>

來源

2016-07-23 04:20:33 frnt

user3550879只想在邊界**上邊界**。 – 2016-07-30 10:13:57

@ IShad0wk我認爲它需要覆蓋它的所有角落邊界：紅色; – frnt

*「編輯 - 我希望它有一個5像素的紅色邊框（只在有角度的一面），所以三角形和邊框是不同的顏色」* - user3550879。 – 2016-07-30 23:56:49

創建一個三角形格帶有邊框

回答

相關問題