如何绘制弯曲边界的右下角三角形？

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>

It在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 ：同在浏览器，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; 

在浏览器，Firefox，IE

案例-2：相同于浏览器，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; 

在浏览器，Firefox，IE

情况3：同在Chrome和IE在Firefox中的区别
Here border-top:none;border-right:none;

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

铬，IE

火狐

案例-4：在IE中不同的是，在浏览器不同的是，不同的Firefox
这里border-top:none;border-right:none;

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

在Chr青梅

在Firefox

在IE

案例5：同在Chrome，火狐，IE
这里border-top:none;border-right:none;border-bottom-right-radius:none

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

在Chrome浏览器，火狐，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>