user3550879 user3550879 - 4 months ago 8
HTML Question

Creating a triangle div with a border

I have a triangle in the top left corner of my site



#corner {
position: absolute;
z-index: 999;
left: 0;
top: 0;
width: 0;
height: 0;
border-top: 50px solid #000;
border-bottom: 50px solid transparent;
border-right: 50px solid transparent;
border-left: 50px solid #000;
}

<div id="corner"></div>





EDIT - I want it to have a 5px red border (only on the angled side) so the triangle and the border are different colors

Ideally it will have a .png image over-top as well, but I can put another div over-top if need be

This is a corner triangle for the whole page

Answer

I believe the best way to achieve what you want is to use the transform property instead of manipulating the border and possibly even needing two elements and a lot of unnecessary code.

Check out this fiddle or the following snippet for a visual representation.

Snippet:

#corner {
  /* Dimensions */
  height: 200px;
  width: 200px;
  
  /* Positioning */
  position: absolute;
  left: -7.5em;
  top: -7.5em;
  z-index: 999;
  transform: rotateZ(-45deg);
  
  /* Styling */
  background-color: red;
  border-bottom: 5px solid #0c0c0c;
}
<div id="corner"></div>

Comments