如何繪製彎曲邊界的右下角三角形？

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>