Html 左边是圆形的CSS三角形边？

我正在尝试创建以下内容，但无法完成

我只能设法在左侧创建圆角，但不能向右倾斜

（来源：）

或者这是

---

我想这就是你想要的

---

你在右边的三角形中遗漏了一些关键点。首先，默认情况下，a: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;
}

​第一部分用于定位，第二部分用于创建实际三角形（请参见）

---

在JSFIDLE中，我将三角形设为蓝色，这样您就可以准确地看到它的位置。更改右边框宽度以使角度更大

啊，你刚才是不是用几乎完全相同的解决方案打败了我？谢谢你，雷内。对不起，伙计：）。。。你对OP遗漏了什么做了更详细的解释。谢谢Stephen。太完美了。是的，我错过了一些关键点，这就是为什么我问stackoverflow的原因。没问题，我只是想指出我做了哪些不同的事情，以便您可以从中学习。哦，还有一个调试提示：将

outline:red solid thin

设置为before元素，以查看它的去向。然后，在正确定位后，再次移除：）

#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;
}
​

#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;
}