CSS3 Inversé Coin arrondi

Question

Existe-t-il un moyen de faire un coin arrondi inversé dans CSS3, quelque chose comme approximativement le coin inférieur gauche dans le dessin (brut) ci-dessous?

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

Peut-être que border-radius peut être combiné avec this technique? Edit: Je ne cherche pas une bulle de dialogue, mais plutôt un moyen de courber le côté droit du point en bas à gauche.

Answer 1

Eh bien, c'est de la folie pure, mais certainement il existe des moyens d'y parvenir :-) pas contre-browserly, mais nous allons voir:

Notre marge:

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

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

Le résultat: http://jsfiddle.net/MrLWY/

Je n'ai testé cela dans Firefox 3.6.3, mais l'idée est clair :-)

Voici prendre deux:

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

Et le résultat: http://jsfiddle.net/ajeN7/

peut-être que cela peut être amélioré de plusieurs façons:

• rendre le navigateur croisé (+ webkit et l'opéra, au moins)
• il pourrait fonctionner dans IEs, sans arrondi, cependant, avec l'aide de quelque chose comme ça http://code.google.com/p/ie7-js/ (pour que le contenu généré fonctionne).
• pour savoir comment cela pourrait fonctionner avec une hauteur flexible.
• pour changer la déclaration de famille de polices :-)

Answer 2

si vous essayez d'obtenir ce genre de regard (un ballon de la parole), il est préférable d'utiliser juste une image pour que :)

Answer 3

Cela permet d'obtenir l'effet dans FF. Utilisez les variantes border-radius appropriées pour les autres navigateurs. Essentiellement, vous utilisez un système 3 div, un avec la même couleur que l'arrière-plan. Ne fonctionne que pour le fond avec une couleur plate.

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

Et le 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

Je ne peux rien dire encore, mais voici donc une nouvelle réponse (en ce qui concerne la réponse Gryzzlys):

Gryzzlys premier exemple ne gère pas différent fond couleurs (pour l'arrière-plan et la bulle).

Mais le second fait.Voici un exemple avec des couleurs d'arrière-plan appliqué:

http://jsfiddle.net/tGnfb/

(I a également ajouté des propriétés border-radius de sorte qu'il rend les frontières pour les autres navigateurs que Firefox).

Answer 5

Il existe des moyens de résoudre ce problème en utilisant simplement CSS. J'ai décidé d'utiliser une technique pour les onglets - mais pourrait être facilement adapté pour les bulles.

Je couvre un exemple de base ici de comment faire un Inverse Border Radius in CSS (here). Cela utilise un truc avec la taille de la bordure pour utiliser l'intérieur, vous devrez peut-être faire un certain positionnement pour le faire fonctionner correctement mais comme vous pouvez le voir, c'est possible.