3

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;
}

1 Answer 1

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>

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.