Inserisci forma raggio-bordo in CSS?

Question

C'è un modo per rendere questa immagine di forma nei CSS? CSS3 va bene, non c'è bisogno di compatibilità IE. La parte sfumata non è importante, è quella curva in basso a destra che non riesco a vedere come fare. Ho visto vari plugin per angoli jQuery ma nulla che funzionerà per me finora. Non posso usare un'immagine di sfondo in quanto il contenuto di questa sarà di lunghezza variabile.

Edit: Grazie per le risposte, molto impressionante! Una cosa però - nell'immagine stessa, c'è uno sfondo blu e un bordo grigio senza cuciture attorno all'intera cosa, compresa la curva sulla destra. Forse è impossibile mantenere questo confine se la soluzione coinvolge 'hack' di confine-raggio su elementi extra, ma se questo può essere mantenuto troppo sarebbe più bello.

Answer 1

Ho creato qualcosa. Probabilmente esiste una soluzione migliore, ma forse questo aiuta.

jsFiddle

CSS:

.bubble { 
    width: 200px; 
    height: 30px; 
} 

.bubble .content { 
    background: #00f; 
    height: 100%; 
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px; 
    margin-right: 20px; 
} 

.bubble .blue, 
.bubble .white, 
.bubble .white .innerwhite { 
    width: 10px; 
    height: 100%; 
    float: right; 
} 

.bubble .blue { 
    background: #00f; 
    border-top-right-radius: 10px; 
} 

.bubble .white { 
    background: #00f; 
} 

.bubble .white .innerwhite { 
    background: #fff; 
    border-bottom-left-radius: 10px; 
} 

HTML:

<div class="bubble"> 
    <div class="white"> 
     <div class="innerwhite"></div> 
    </div> 
    <div class="blue"></div> 
    <div class="content"></div> 
</div> 

Answer 2

Ecco CSS della forma. Hai bisogno di più forme per realizzare ciò che vuoi.

body{background:white;} 

.Shape{margin:20px 30px;} 

.Shape1{ 
    position:relative; 
    width:200px; 
    height:65px; 
    background:blue; 
    border-radius:20px; 
    border:2px solid white; 
    z-index:2; 
    top:0px; 
    left:0px;} 

.Shape2{ 

    position:relative; 
    width:70px; 
    height:40px; 
    background:blue; 
    border-radius:12px; 
    border-bottom:2px solid white; 
    z-index:3; 
    top:-42px; 
    left:170px;} 

.Shape3{ 
    position:relative; 
    width:20px; 
    height:20px; 
    background:blue; 
    z-index:4; 
    top:-64px; 
    left:170px;} 

.Shape4{ 
    position:relative; 
    width:40px; 
    height:46px; 
    background:white; 
    top:-110px; 
    left:202px; 
    z-index:3; 
    box-shadow:inset 2px 0px 4px lightgray; 
    border-bottom-left-radius:40px;} 

.Shape5{ 
    position:relative; 
    height:1px; 
    width:218px; 
    background:transparent; 
    box-shadow:0px 0px 8px black; 
    left:18px; 
    top:-110px;} 

.Shape6{ 
    position:relative; 
    height:50px; 
    width:20px; 
    background:white; 
    top:-160px; 
    left:236px; 
    z-index:4;} 

.Shape7{ 
    position:relative; 
    height:10px; 
    width:50px; 
    background:white; 
    top:-210px; 
    left:203px; 
    z-index:4;} 

E il codice HTML:

<div class="Shape"> 

    <div class="Shape1"></div> 
    <div class="Shape2"></div> 
    <div class="Shape3"></div> 
    <div class="Shape4"></div> 
    <div class="Shape5"></div> 
    <div class="Shape6"></div> 
    <div class="Shape7"></div> 

    </div> 

Ecco un JsBin per il output.

Answer 3

Un bordo di arrotondamento non può essere eseguito con CSS standard su un singolo oggetto DOM, ma è possibile utilizzare il CSS per farlo aggiungendo elementi aggiuntivi.

Il trucco per fare questo è quello di utilizzare i CSS :before e :after selettori per creare effettivamente un elemento in più su entrambi i lati l'elemento principale, e quindi utilizzare appropriati border-radius e background per forma che per adattarsi.

Non è facile, ma è diventato piuttosto un trucco comune usarlo per le schede. Ad esempio, see here per un buon tutorial.

Spero che questo aiuti.