CSS三角形左侧带圆角？

Question

我试图按照下面的要求进行创建，但是无法完成。

我只能在左侧创建圆角而无法创建向右倾斜的形状。

请参考以下链接：
_{（图片来源：kerrydeaf.com）}

#talkbubble
 {
width: 100px;
height: 35px;
background: #FFCC05;
position: relative;
-moz-border-radius:8px 0 0 8px;
-webkit-border-radius:8px 0 0 8px;
border-radius:8px 0 0 8px;
margin-right:50px;
 }

Or here is http://jsfiddle.net/alma/USezL/23/

- Irishgirl

Answer 1

我认为这就是你要找的内容：http://css-tricks.com/snippets/css/css-triangle/。此链接提供了有关如何在CSS中创建三角形的详细信息。另外，http://jsfiddle.net/zQKhb/ 这个链接也可能对你有帮助。

#talkbubble 
{ 
    width: 100px;
    height: 36px;
    background: #FFCC05;
    position: relative;
    -moz-border-radius:8px 0 0 8px;
    -webkit-border-radius:8px 0 0 8px;
    border-radius:8px 0 0 8px;
    margin-right:50px;

} 

#talkbubble:before
{
    content:"";
    display:block;
    position: absolute;
    right: -36px;
    top:0;
    width: 0;
    height: 0;
    border: 18px solid transparent;

    border-color: transparent transparent #FFCC05 #FFCC05;
}
​

- Rene Koch

---

哎呀，你刚好比我快用几乎完全相同的解决方案了吗？ - Stephan Muller

谢谢你，Rene。这太完美了。 - Irishgirl

抱歉，伙计 :) ... 你的回答更详细地解释了 OP 缺少什么。 - Rene Koch

Answer 2

您在右侧的三角形中缺少一些关键点。首先，默认情况下，:before元素是display: inline，因此要创建您所寻求的效果，您需要使用display: block。

其次，right: 120px会将其移动到原始位置右侧120像素处。也就是说，它被向左推出视野。相反，您需要使用负的右侧位置（向右移动）100％（气泡的宽度）。这样，它就会出现在右侧。

第三，不确定您想要什么形状，但几乎什么都不像三角形；）。

我改用了这个：

#talkbubble:before
{
    content:" ";
    display: block;
    position: relative;
    right: -100%;

    width: 0; 
    height: 0; 
    border-left: 0 solid transparent;
    border-right: 20px solid transparent;    
    border-bottom: 35px solid #FFCC05;
}

第一部分是定位，第二部分是创建实际的三角形（参见http://css-tricks.com/snippets/css/css-triangle/）。

在jsfiddle中，我将三角形设置为蓝色，以便您可以准确地看到它的位置。更改border-right的宽度以使角度更大。http://jsfiddle.net/USezL/31/

- Stephan Muller

---

谢谢Stephen。太完美了。是的，我错过了一些关键点，这就是为什么我在stackoverflow上提问的原因。 - Irishgirl

没问题，只是想指出我所做的不同之处，让你能够从中学习。 - Stephan Muller

哦，还有一个调试提示：将 outline: red solid thin 设置到 before 元素上以查看它的位置。然后在正确定位后再将其删除 :) - Stephan Muller