如何绘制带有弯曲边框的右下角三角形？

Question

如CSS-Tricks所述 ，CSS三角形可以写为：

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

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

但是，通过CSS弯曲边框似乎不起作用：

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

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

它会在FF上产生毛刺，并在Chrome上将整个三角形显示为红色。 Safari似乎是唯一可以显示出我所期望的东西。

---

问题1.这是浏览器错误还是我做错了什么？

问题2.还有其他方法可以轻松实现带有右下边框半径的右下三角形吗？ 我在考虑SVG，但是曲折的刺激性很难从代码中修改。

谢谢。

Answer 1

情况1：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;

在Chrome，Firefox，IE中

情况2：Chrome，Firefox，IE中相同
如果未提供border-top则将其视为border-top:none

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

在Chrome，Firefox，IE中

情况3：Chrome和IE中相同，而Firefox中不同
这里border-top:none;border-right:none;

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

浏览器

火狐

案例4：IE不同，Chrome不同，Firefox不同
这里border-top:none;border-right:none;

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

在Chrome中

在Firefox中

在IE中

情况5：Chrome，Firefox，IE中相同
这里border-top:none;border-right:none;border-bottom-right-radius:none

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

在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> 

Answer 2

我最喜欢SVG解决方案的想法，但是如果您具有固定的背景色，则可以使用纯CSS进行类似的操作。 我正在使用伪元素，但想法是将一个三角形放在另一个三角形的上方以对其进行“遮罩”，这也可以通过其他方式完成：

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>