CODEWITHSUNDEEP
htmlcss
user3550879
user3550879

Reputation: 3469

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>

Upvotes: 1

Views: 194

Answers (2)

ScientiaEtVeritas
ScientiaEtVeritas

Reputation: 5278

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>

Upvotes: 3

webta.st.ic
webta.st.ic

Reputation: 5169

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>

Upvotes: 1

Related Questions