создать полный треугольник границы div

Question

Я пытаюсь сделать верхний левый треугольник (красный) с (черной) границей. Я хочу, чтобы у него была черная граница. Эта попытка углы квадрата, чтобы подделать его (выталкивается наружу экрана, чтобы mimmick треугольник)

Я хочу границе весь путь вокруг, в котором моя попытка не будет работать

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

Answer 1

Существует более простой способ создания треугольников, вы можете просто использовать 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>

Answer 2

You может сделать треугольник также следующим образом: 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>