create full border triangle div - html

Question

I am trying to make a top-left triangle (red) with a (black) border. I want it to have the black border all the way around. This attempt angles a square to fake it (pushed outside the screen to mimmick a triangle)
I want the border all the way around, in which my attempt won't work
#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

There is an easier way to create triangles, you can just use an element with a width / height of 0.
And for the border you want, the idea is to have two overlapping triangles in two different colors and different sizes, maybe take a look at the following snippet:
.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 can made triangle also like this: https://css-tricks.com/examples/ShapesOfCSS/
I tried to combine two of them and with margin to position it, so it would look as one with a border. Perhaps this is a possible solution for you. Cheers.
.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>