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;到.boxCSS.

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