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

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

我最喜欢 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>

Answer 2

案例 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;

Chrome , IE

火狐

案例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>