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; 似乎会引起冲突。当它被激活时，右上角将会被圆角化，但三角形将消失。 有没有解决这个问题的方法？或者有更好的方法吗？谢谢。

- rickypai

---

你可以尝试在画布(canvas)上绘制它，而不是在div上。这样创建一个三角形会更容易。 - Abdu Egal

另一个选择可能是使用一些CSS3渐变来作为背景（在线生成器，如http://www.colorzilla.com/gradient-editor/可能是一个不错的起点）。 - Paweł Bulwan

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;

而不是简单地在 .box 的 CSS 中添加 overflow: hidden;。

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

- Dylan

Answer 2

我认为你在CSS中创建三角形的想法过于复杂。使用CSS渐变似乎是更简单的解决方案。可以创建仅具有突然颜色变化的渐变，并且还可以使它们呈对角线，因此似乎可以完全满足您所需的解决方案。

现在我们已经确定了一个不同的方法来回答这个问题，我们可以参考其他类似的问题，比如这个问题：如何制作一个对角线CSS渐变而不会混合在一起（颜色变化明显），并向右偏移70%？ CSS渐变唯一的问题是它们不支持旧版本的IE。但是这可以解决。IE6/7/8确实有自己的filter方法来创建渐变，可以达到效果，但我的首选是使用CSS3Pie，即使在旧版本的IE中也可以使用标准的CSS3渐变。

希望这能帮到你。

- Spudley