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

である私は、このuはあなたがいくつか欠落していた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が必要です。

第2に、right: 120pxは元の位置の右側から120ピクセル離れていました。つまり、それは見えなく左に押し込まれていました。代わりに、100％（吹き出しの泡の幅）の負の右の位置（〜の右に移動）が必要でした。そうすれば、それはそれの右に終わるだろう。

第3に、あなたが行っていた形はわからないが、三角形以外はほとんどすべてだった。

私の代わりにこれを行った：

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

の最初の部分は、位置決めのためのものである、第2の部分は（http://css-tricks.com/snippets/css/css-triangle/参照）実際の三角形を作成しています。

jsfiddleでは、私は三角形を青色にして、正確にどこにあるかを確認できます。境界線の幅を変更して角度を大きくします。 http://jsfiddle.net/USezL/31/