創建完整邊框三角形div

我正在嘗試製作帶有（黑色）邊框的左上角三角形（紅色）。我希望它一直有黑色的邊框。這種企圖角方形僞造它（屏幕外推到mimmick三角形）創建完整邊框三角形div

我想要的邊框一路，在我試圖將無法正常工作

#corner { 
 
    height: 75px; 
 
    width: 100px; 
 
    position: absolute; 
 
    left: -3em; top: -2em; 
 
    z-index: 999; 
 
    transform: rotateZ(-45deg); 
 
    background-color: red; 
 
    border-bottom: 5px solid #0c0c0c; 
 
}

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

來源

2016-07-23 user3550879

的可能的複製[CSS三角形的自定義邊框顏色（http://stackoverflow.com/questions/9450733/css-triangle-custom-border-color） – BuddhistBeast

有一個更簡單的方法來創建三角形，你可以使用an element with a width/height of 0。

而且你想要的邊界，這個想法是有兩種不同的顏色，不同大小的兩個重疊的三角形，也許看看下面的代碼片段：

.triangle-up-left-1 { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 50px solid rgb(246, 85, 85); 
 
    border-right: 50px solid transparent; 
 
    z-index:2; 
 
    position:absolute; 
 
    top:5px; 
 
    left:13px; 
 
} 
 
.triangle-up-left-2 { 
 
    width: 0; 
 
    height: 0; 
 
    position:absolute; 
 
    top:0; 
 
    border-top: 68px solid rgb(0, 0, 0); 
 
    border-right: 68px solid transparent; 
 
    z-index:1: 
 
}

<div class="triangle-up-left-1"></div> 
 
<div class="triangle-up-left-2"></div>

來源

2016-07-23 05:50:37 ScientiaEtVeritas

你可以做成三角形也是這樣的：https://css-tricks.com/examples/ShapesOfCSS/

我試圖把它們中的兩個和邊距放在一起，所以它看起來就像一個邊框。也許這對你來說是一個可能的解決方案。乾杯。

.triangle1 { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 100px solid black; 
 
    border-right: 100px solid transparent; 
 
} 
 
.triangle2 { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 82px solid red; 
 
    border-right: 82px solid transparent; 
 
    position: absolute; 
 
    margin-top: -95px; 
 
    margin-left: 5px; 
 
}

<div class="triangle1"> 
 
    <div class="triangle2"></div> 
 
</div>

來源

2016-07-23 06:00:34 MrBuggy

創建完整邊框三角形div

回答

相關問題