Creating a triangle div with a border

Question

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

I made the triangle black to make it visible, and then I thought I also had to invert the color of the border. But I don't see the point if the border and the triangle have the same color. Just make it bigger. — Oriol, Jul 23 '16 at 02:26
Please explain further or show what your desired output is. Your question doesn't make much sense. — 4castle, Jul 23 '16 at 02:34
I apologize, the edit to the question changed what I am asking. I will clarify — user3550879, Jul 23 '16 at 03:33
Possible duplicate of [CSS triangle custom border color](http://stackoverflow.com/questions/9450733/css-triangle-custom-border-color) — Scott, Jul 23 '16 at 04:22
At some point it makes more sense to just stick an svg in there — nishantjr, Jul 23 '16 at 05:19
fair enough, although the triangle I'm looking for has been answered below — user3550879, Jul 23 '16 at 05:28

score 2 · Answer 1 · 2016-07-30T10:15:02.380

2

Create two divs:

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

#corner-inner {
  position: absolute;
  z-index: 999;
  left: -55px;
  top: -55px;
  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 id="corner-inner"></div>
</div>

edited Jul 30 '16 at 10:15

answered Jul 23 '16 at 03:19

I assume this is the best response, I just have to put a logo overtop as well, and I don't want to stack to many divs – user3550879 Jul 23 '16 at 03:35
Yeah, so far... I think that's as simple as it's goning to get. I couldn't work how to do this any other way. – Jul 23 '16 at 03:37

Angel Politis · Accepted Answer · 2016-07-23T04:28:59.070

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>

score 0 · Answer 3 · answered Jul 23 '16 at 04:20

0

You can even try pseudo elements :before and :after.

#corner {
  position: absolute;
  z-index: 1;
  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;
}
#corner:before{
  content:"";
  position:absolute;
  border-top: 5px solid red;
  border-left: 5px solid red;
  top:-50px;
  left:-50px;
  width:92px;
  height:92px;
}
#corner:after{
  content:"";
  position:absolute;
  border-right: 5px solid red;
  top:-104px;
  left:-83px;
  width:93px;
  height:140px;
  transform:rotate(45deg);
}

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

answered Jul 23 '16 at 04:20

frnt

8,455
2
22
25

user3550879 wanted the border **only** on the alngled side. – Jul 30 '16 at 10:13
@IShad0wk I thought it needs to cover it's all corners border:red; – frnt Jul 30 '16 at 15:05
*"EDIT - I want it to have a 5px red border (only on the angled side) so the triangle and the border are different colors"* - user3550879. – Jul 30 '16 at 23:56

Creating a triangle div with a border

3 Answers3