CSS3 invertito angoli arrotondati

Question

C'è un modo per fare un angolo arrotondato invertita in CSS3, qualcosa circa come l'angolo in basso a sinistra nella (grezzo) disegno sottostante?

/-------\
|       |
|       |
|       |
| ______/
|/ <---The left side is flush (straight), the slant should be rounded

Forse border-radius potrebbe essere combinata con questa tecnica ?

Modifica:. Io non sto cercando un fumetto, ma solo un modo per la curva a destra del punto in basso a sinistra

Answer 1

Bene, questa è pura follia, ma sicuramente ci sono modi per raggiungere questo :-) non cross-browserly, ma vediamo:

Il nostro mark-up:

<div id="bubble">
    <p>This is madness!</p>
</div>

Il nostro CSS:

#bubble {
    width:200px;
    height:100px;
    border:1px solid #000;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
}
    #bubble p {
        margin: 1em;
        font-family:Comic Sans MS;/* well, madness it is! */
    }
#bubble:before {
    content:'';
    border:20px solid;
    border-color:#fff transparent transparent;
    position:absolute;
    top:110px;
    left:25px;
    z-index:2;
}
#bubble:after {
    content:'';
    border:20px solid;
    border-color:#000 transparent transparent;
    position:absolute;
    top:111px;
    left:25px;
    z-index:1;
}

Il risultato: http://jsfiddle.net/MrLWY/

Ho testato solo questo in Firefox 3.6.3, ma l'idea è chiara: -)

Ecco prendere due:

#bubble {
    width:200px;
    height:100px;
    border:1px solid #000;
    position:relative;
    -webkit-border-radius:20px 20px 20px 0;
    -moz-border-radius:20px 20px 20px 0;
    border-radius:20px 20px 20px 0;
}
    #bubble p {
        margin: 1em;
        font-family:Comic Sans MS;
    }
#bubble:before {
    content:'';
    width:20px;
    height:20px;
    background:#fff;
    border-left:1px solid #000;
    position:absolute;
    top:100px;
    left:-1px;
}
#bubble:after {
    content:'';
    -webkit-border-radius:20px 0 0 0;
    -moz-border-radius:20px 0 0 0;
    border-radius:20px 0 0 0;
    border:solid #000;
    border-width:1px 0 0 1px;
    width:20px;
    height:19px;
    position:absolute;
    top:100px;
    left:0;
}

E il risultato: http://jsfiddle.net/ajeN7/

Forse questo può essere migliorata in molti modi:

• rendere cross-browser (+ WebKit e Opera, almeno)
• potrebbe funzionare in IE, senza arrotondamenti, però, con l'aiuto di una cosa del genere http: //code.google.com/p/ie7-js/ (in ordine per i contenuti generati al lavoro).
• per scoprire come potrebbe funzionare con l'altezza flessibile.
• per cambiare la dichiarazione font-family: -)

Answer 2

Non posso commentare ancora, ma ecco quindi una nuova risposta (per quanto riguarda Gryzzlys risposta):

Gryzzlys primo esempio non ha gestito diversi colori di sfondo (per lo sfondo e bolla).

Ma il secondo lo fa. Ecco un esempio con i colori di sfondo applicato:

http://jsfiddle.net/tGnfb/

(Ho anche aggiunto proprietà border-radius in modo che renderà le frontiere per altri browser di Firefox).

Answer 3

Si ottiene l'effetto in FF. Utilizzare le varianti border-radius appropriati per gli altri browser. Essenzialmente si utilizza un sistema a 3 div, uno con lo stesso colore dello sfondo. Fa solo il lavoro per lo sfondo con un colore piatto.

<div class="top">some text here</div>
<div class="bottom"><div class="bottom2"></div></div>

E il CSS:

body
    {
    background-color:red;
    }

.top
    {
    display: block;
    width: 200px;
    height: 50px;
    background-color:white;
    padding:5px;

    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    -moz-border-radius-bottomright:10px;
    }

.bottom
    {
    display: block;
    width: 20px;
    height: 20px;
    background-color: white;    
    }

.bottom2
    {
    display: block;
    width: 20px;
    height: 20px;
    background-color: red;  
    -moz-border-radius-topleft:20px;
    }

Answer 4

se si sta cercando di raggiungere quel tipo di look (un palloncino discorso) è meglio usare un'immagine per solo per questo:)

Answer 5

Ci sono modi si potrebbe risolvere questo problema utilizzando solo i CSS. Ho deciso di usare una tecnica per le schede -. Ma potrebbe essere facilmente adattato per fumetti

I coprire un esempio di base qui di come fare una Inverse Border Radius in CSS (qui) . Questo utilizza un trucco con le dimensioni del bordo da utilizzare all'interno, potrebbe essere necessario fare un po 'di posizionamento per farlo funzionare correttamente ma come si può vedere la sua possibile.