5

在此处输入图像描述

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

.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; 似乎会引起冲突。当它被激活时，右上角会变圆，但三角形会消失。

在此处输入图像描述

在此处输入图像描述

有解决方法吗？还是有更好的方法来做到这一点？

谢谢你。

4

2 回答 2

5

一种似乎有效的解决方案（在 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/

于 2012-10-30T21:07:42.133 回答
3

我认为您在 CSS 中创建三角形的想法是过度思考问题。CSS 渐变似乎是这里更简单的解决方案。

可以创建只是颜色突然变化的渐变，您也可以将它们制作成对角线，因此它似乎可以提供您所追求的解决方案。

现在我们已经为这个问题建立了不同的思路，我们可以参考类似这样的其他问题作为参考：如何制作一个对角 css 渐变而不使颜色混合在一起（颜色急剧变化），向右偏移 70%？

CSS 渐变的唯一问题是旧版本的 IE 不支持它们。不过这可以解决。IE6/7/8 确实有自己filter的创建渐变的方法可以解决问题，但我更喜欢使用CSS3Pie，它允许您即使在旧的 IE 版本中也可以使用标准的 CSS3 渐变。

希望有帮助。

于 2012-10-30T22:27:37.050 回答