How do I draw a bottom-right triangle with a curved border?

Question

As stated on CSS-Tricks, a CSS triangle can be written as:

#triangle {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-left: 100px solid transparent;
}

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

Curving the border via CSS however, doesn't seem to work:

#triangle {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-left: 100px solid transparent;
  border-bottom-right-radius: 10px;
}

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

It creates glitches on FF, and shows the whole triangle as red on Chrome. Safari seems the only one to show what I would expect.

Question 1. Is this a browser bug or am I doing something wrong?

Question 2. Any other way to easily implement a bottom-right triangle with a bottom-right border-radius? I'm thinking SVG, but then the curvature poignancy will be kind of difficult to modify from code.

Thanks.

Check this example- http://stackoverflow.com/questions/14446677/how-to-make-3-corner-rounded-triangle-in-css — Sahil Dhir, Apr 25 '17 at 12:16

shivam Gupta · Answer 1 · 2017-04-25T15:07:38.497

Case-1: Same in Chrome , Firefox , IE

 border-bottom:  100px solid red;
 border-left:  100px solid yellow;
 border-right: 100px solid green;
 border-top : 100px solid transparent;
 border-bottom-right-radius: 10px;

In Chrome , Firefox , IE

Case-2: Same in Chrome , Firefox, IE
If border-top not provided its considered as border-top:none

      border-bottom:  100px solid red;
      border-left:  100px solid yellow;
      border-right: 100px solid green;
      border-bottom-right-radius: 10px;

In Chrome , Firefox , IE

Case 3: Same in Chrome and IE , Different in Firefox
Here border-top:none;border-right:none;

      border-left:  100px solid yellow;    
      border-bottom:  100px solid red;      
      border-bottom-right-radius: 10px;

Chrome , IE

Firefox

Case-4:Different in IE , Different in Chrome, Different in Firefox
Here border-top:none;border-right:none;

      border-left:  100px solid transparent;    
      border-bottom:  100px solid red;      
      border-bottom-right-radius: 10px;

In Chrome

In Firefox

In IE

Case-5: Same in Chrome , Firefox , IE
Here border-top:none;border-right:none;border-bottom-right-radius:none

      border-left:  100px solid transparent;    
      border-bottom:  100px solid red;

In Chrome , Firefox , IE

Codepen

#triangle {
          width: 0;
          height: 0;
          border: 100px solid red;
          border-left: 100px solid transparent;
          border-top: 100px solid transparent;
          border-bottom-right-radius: 10px;
    }

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

yep! That's it! Will you add an explanation of why your snippet works and my doesn't so that I can accept this answer? — doplumi, Apr 25 '17 at 12:56
@doplumi Updated post , wherever it shows inconsistent behaviour, it can be considered as bug or just different implementations of css modules in different browsers. — shivam Gupta, Apr 25 '17 at 15:58

score 0 · Answer 2 · answered Apr 25 '17 at 12:30

I like the idea of an SVG solution best, but you could do something like this with pure CSS if you have a fixed background color to place it on. I'm using pseudo elements, but the idea is to place one triangle on top of another to 'mask' it, which can probably be done in other ways too:

https://codepen.io/alexmacarthur/pen/dWOoYL

Original Triangle:
<div id="triangle"></div>
<br>
Possible Solution:
<div id="triangle2"></div>

<style>
#triangle {
   width: 0;
   height: 0;
   border-bottom: 100px solid red;
   border-left: 100px solid transparent;
   border-bottom-right-radius: 10px;
 }

 #triangle2 {
   position: relative;

   &:before,
   &:after {
     content: '';
     display: block;
     position: absolute;
     z-index: 1;
     width: 0;
     height: 0;
     border-top: 100px solid white;
     border-right: 100px solid transparent;
     border-bottom-right-radius: 10px;
   }

   &:after {
     z-index: 0;
     border-right: none;
     border-top: none;
     border-bottom: 100px solid red;
     border-left: 100px solid transparent;
     border-bottom-right-radius: 10px;
   }
 }
 </style>

How do I draw a bottom-right triangle with a curved border?

2 Answers2