user3550879 user3550879 - 27 days ago 8
CSS Question

create full border triangle div

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 Source

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>