CSS Triangle inside a triangle?

Question

I am trying to create a border like effect for the triangle. I have tried giving it a border, box shadow, neither works. Then if you do put another triangle div inside of it the outer triangle just becomes larger.

#triangle {
  border-style: solid;
  border-width: 25px 50px 25px 0;
  border-color: transparent #000 transparent transparent;
}

j08691 · Accepted Answer · 2017-02-07 19:44:29Z

4

Try using a pseudo-element like :after.

Here you go!

#triangle {
  border-style: solid;
  border-width: 25px 50px 25px 0;
  border-color: transparent #000 transparent transparent;
  width: 0;
  position: relative;
}
#triangle:after {
  content: ' ';
  position: absolute;
  border-style: solid;
  border-width: 13px 25px 13px 0;
  border-color: transparent red transparent transparent;
  width: 0;
  top: -13px;
  left: 17px;
}

<div id="triangle">
</div>

edited Feb 7, 2017 at 19:44

j08691

208k33 gold badges269 silver badges281 bronze badges

answered Feb 7, 2017 at 19:43

Liam

1,9221 gold badge12 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

CSS Triangle inside a triangle?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related