Adding border to CSS triangle [duplicate]

Question

I have a triangle

<div class="triangle-left"></div>


.triangle-left {
    width: 0; 
    height: 0; 
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    border-right: 22px solid white;
}

How do I draw the outline of a CSS triangle, considering border itself is used to make the triangle? External divs?

Make another triangle that's red and one pixel wider and then put the white triangle over it and you have a white triangle with a red border. — frenchie
– frenchie, Commented Mar 12, 2015 at 4:07

RSquared · Accepted Answer · 2015-03-12 04:08:10Z

38

One way to do it is the create an inner triangle which is smaller.

.triangle-left {
    width: 0;
    height: 0;
    border-top: 23px solid transparent;
    border-bottom: 23px solid transparent;
    border-right: 23px solid red;
}

.inner-triangle {
    position: relative;
    top: -20px;
    left: 2px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid blue;
}

<div class="triangle-left">
    <div class="inner-triangle"></div>
</div>

answered Mar 12, 2015 at 4:08

RSquared

1,20811 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Micah Over a year ago

how would you do this if the triangle was in an li:after element?

showdev · Accepted Answer · 2018-03-06 22:32:15Z

36

This is how I would do it.

.triangle-left {
  width: 0;
  height: 0;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
  border-right: 22px solid black;
  position: relative;
}

.triangle-left:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
  border-right: 21px solid #dddddd;
  position: absolute;
  top: -21px;
  left: 1px;
}

<div class="triangle-left"></div>

Here it is on JSFiddle.

edited Mar 6, 2018 at 22:32

showdev

29.3k37 gold badges61 silver badges82 bronze badges

answered Mar 12, 2015 at 4:52

joncampbell

6244 silver badges9 bronze badges

Collectives™ on Stack Overflow

Adding border to CSS triangle [duplicate]

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related