I'm trying to simply round off the corners of my triangle; to make the triangle, I used the border trick (making the top and bottom border transparent). But when I try using border-radius, my triangle becomes like this:
// my css
.triangle {
position: absolute;
top: 15px;
left: 25px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 30px solid $white;
border-radius: 10px;
z-index: 1;
}
What's the correct way of rounding the corners of a triangle that's created using borders? The solutions that I could find didn't seem to be using this border trick of creating the triangle.
