CSS Dreiecksseite mit Runde auf der linken Seite?

Question

Ich versuche, dies wie folgt zu erstellen und konnte es nicht beenden.

Ich kann nur schaffen, eine abgerundete Ecken links, aber nicht schräg nach rechts zu erstellen.

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

Oder hier ist http://jsfiddle.net/alma/USezL/23/

Answer 1

Ich denke, das ist das, was u suchen 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

Sie wurden einige fehlende entscheidende Punkte in Ihrem Dreieck auf der rechten Seite. Zunächst einmal ist standardmäßig ein: before-Element display: inline, um den Effekt zu erzeugen, den Sie suchten, benötigten Sie stattdessen display: block.

Zweitens bewegte die right: 120px es 120 Pixel von der rechten Seite seiner ursprünglichen Position entfernt. Das heißt, es wurde aus dem Blickfeld nach links geschoben. Stattdessen benötigen Sie eine negative rechte Position (Verschieben bis rechts) von 100% (die Breite der Sprechblase). Auf diese Weise würde es rechts davon enden.

Drittens, nicht sicher, welche Form Sie anstrebten, aber es war fast alles außer einem Dreieck;).

I für diese Stelle ging:

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

Der erste Teil zum Positionieren, so wird der zweite Teil das tatsächliche Dreieck zu schaffen (siehe http://css-tricks.com/snippets/css/css-triangle/).

In der JFiddle habe ich das Dreieck blau gemacht, damit Sie genau sehen können, wo es ist. Ändern Sie die Rahmenbreite, um den Winkel zu vergrößern. http://jsfiddle.net/USezL/31/