css3三角形，有一个圆角

Question

我正在尝试实现此对话框而不回复使用右上角的图像。以下是我的实现。

.box{
    -webkit-border-radius: 6px 6px;
    -moz-border-radius: 6px / 6px;
    -khtml-border-radius: 6px / 6px;
    border-radius: 6px / 6px;
    width:33%;
    border: 1px solid #DDD;
    display: inline-block;
    margin-right:10px;
    margin-bottom: 10px;
    max-width: 290px;
    padding: 10px;
}

.triangle-topright { 
    width: 0; 
    height: 0; 
    border-top: 50px solid #fafad6; 
    border-left: 50px solid transparent;
    -webkit-border-top-right-radius: 6px 6px;
    -moz-border-radius-topright: 6px / 6px;
    -khtml-border-top-right-radius: 6px / 6px;
    border-top-right-radius: 6px / 6px;
    float: right;
    margin-top: -10px;
    margin-right: -10px;
}

<div class="box">
   <div class="triangle-topright"></div>
   <h3>title</h3>
   <p>stuff</p>  
</div>

问题是这适用于safari，但对于chrome，-webkit-border-top-right-radius：6px 6px;似乎引起了冲突。当它被激活时，右上角将被舍入，但三角形将消失。

有解决方法吗？或者有更好的方法吗？

谢谢。

Answer 1

一个似乎有效的解决方案（在Chrome，Safari，Firefox中测试）正在从.triangle-topright

中删除以下行

-webkit-border-top-right-radius: 6px 6px;
-moz-border-radius-topright: 6px / 6px;
-khtml-border-top-right-radius: 6px / 6px;
border-top-right-radius: 6px / 6px;

而只是将overflow: hidden;添加到.box css。

演示：http://jsfiddle.net/BcrKH/

Answer 2

我认为你在CSS中创建三角形的想法过分考虑了这个问题。 CSS梯度似乎是这里更简单的解决方案。

可以创建只是突然变色的渐变，你也可以将它们对齐，所以看起来它可以提供你所追求的解决方案。

现在我们已经针对这个问题建立了不同的方法，我们可以参考其他类似的问题作为参考：How to make a diagonal css gradient without the colors blending together(a sharp color change) that's displaced 70% to the right?

CSS渐变的唯一问题是它们在旧版本的IE中不受支持。然而，这可以解决。 IE6 / 7/8确实有自己的filter创建渐变的方法可以做到这一点，但我的偏好是使用CSS3Pie，它允许你使用标准的CSS3渐变，即使在旧的IE中版本

希望有所帮助。