create full border triangle div

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>

Possible duplicate of [CSS triangle custom border color](http://stackoverflow.com/questions/9450733/css-triangle-custom-border-color) — BuddhistBeast, Jul 23 '16 at 05:47

score 3 · Accepted Answer · edited Sep 25 '17 at 20:43

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>

score 1 · Answer 2 · answered Jul 23 '16 at 06:00

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>

create full border triangle div

2 Answers2