Html 我如何画一个带曲线边框的右下角三角形？

如上所述，CSS三角形可以写成：

#三角形{
宽度：0；
身高：0；
边框底部：100px纯红；
左边框：100px实心透明；
}

---

我最喜欢SVG解决方案的想法，但是如果您有固定的背景颜色来放置它，您可以使用纯CSS执行类似的操作。我使用的是伪元素，但其想法是将一个三角形放在另一个三角形的顶部来“屏蔽”它，这可能也可以通过其他方式实现：

原始三角形：


可能的解决办法：
#三角{
宽度：0；
身高：0；
边框底部：100px纯红；
左边框：100px实心透明；
边框右下半径：10px；
}
#三角形2{
位置：相对位置；
&：之前，
&：之后{
内容：''；
显示：块；
位置：绝对位置；
z指数：1；
宽度：0；
身高：0；
边框顶部：100像素纯白；
右边框：100px实心透明；
边框右下半径：10px；
}
&：之后{
z指数：0；
边界权：无；
边界顶部：无；
边框底部：100px纯红；
左边框：100px实心透明；
边框右下半径：10px；
}
}

Case-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-bottom:  100px solid red;
      border-left:  100px solid yellow;
      border-right: 100px solid green;
      border-bottom-right-radius: 10px;

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

在Chrome、Firefox、IE中
案例3：Chrome和IE相同，Firefox不同
此处

边框顶部：无；边界权：无

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

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

铬合金，即



Firefox


案例4：IE不同，Chrome不同，Firefox不同

此处
边框顶部：无；边界权：无

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

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

在Chrome中



在Firefox中



在IE中



案例5：在Chrome、Firefox、IE中也是如此
此处
边框顶部：无；边界权：无；边框右下半径：无

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

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

在Chrome、Firefox、IE中



#三角形{
宽度：0；
身高：0；
边框：100px纯红；
左边框：100px实心透明；
边框顶部：100px实心透明；
边框右下半径：10px；
}
检查这个例子-是的！就这样！你能解释一下为什么你的代码片段有效，而我的代码片段无效，这样我就可以接受这个答案吗？@doplumi更新的帖子，如果它表现出不一致的行为，就可以被认为是bug，或者只是不同浏览器中css模块的不同实现。