左側有圓形的CSS三角形邊？

Question

我試圖按照下面的方式創建它，但無法完成它。

我只能設法在左側創建一個圓角，但不能向右傾斜。

align top http://www.kerrydeaf.com/arrow.png

#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

你失蹤了一些在你的三角形右邊的關鍵點。首先，默認情況下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; 
} 

第一部分是用於定位，所述第二部分是創建實際的三角形（參見http://css-tricks.com/snippets/css/css-triangle/）。

在jsfiddle中，我製作了三角形藍色，以便您可以確切地看到它在哪裏。更改邊界右側的寬度以增大角度。 http://jsfiddle.net/USezL/31/