firefox - css3三 Angular 形带一个圆 Angular

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;似乎引起了冲突。激活后，右上角会变圆，但三 Angular 形会消失。

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

谢谢。

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/