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;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

2 个答案: