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

或者这里是 http://jsfiddle.net/alma/USezL/23/

Answer 1

我认为这就是你正在寻找的http://css-tricks.com/snippets/css/css-triangle/

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

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 中，我将三角形设为蓝色，以便您可以准确地看到它的位置。更改右边框宽度以使角度更大。http://jsfiddle.net/USezL/31/