CSS3 Coin arrondi inversé

Est-il un moyen de faire une inversion de coins arrondis en CSS3, quelque chose comme le coin en bas à gauche dans l' (brut) le dessin ci-dessous?

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

Peut-être border-radius peut être combinée avec cette technique?

Edit: je ne suis pas à la recherche d'une bulle de parole, mais plutôt juste une façon de faire de la courbe de la partie à droite du point en bas à gauche.

source d'informationauteur VirtuosiMedia

  1. 16

    Bien, c'est de la pure folie, mais il y a certainement des façons d'y parvenir 🙂 pas de la croix-browserly, mais nous allons voir:

    Notre marque:

    <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/

    J'ai uniquement testé dans Firefox 3.6.3, mais l'idée est claire 🙂

    Ici est de 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 ce qui peut être amélioré de plusieurs façons:

    • faire de la cross-browser (+webkit et opera, au moins)
    • il pourrait travailler dans IEs, sans les arrondis, bien que, avec l'aide de quelque chose comme ça http://code.google.com/p/ie7-js/ (pour le contenu généré par le travail).
    • à savoir comment il pourrait travailler avec une hauteur flexible.
    • pour changer la police de caractères de la famille de la déclaration 🙂
  2. 6

    Je ne peux pas encore de commentaires, mais voici une nouvelle réponse (en ce qui concerne Gryzzlys réponse):

    Gryzzlys premier exemple n'a pas de traiter les différentes couleurs d'arrière-plan (pour le fond et la bulle).

    Mais la deuxième n'. Voici un exemple avec les couleurs de fond appliquée:

    http://jsfiddle.net/tGnfb/

    (J'ai aussi ajouté border-radius propriétés, ce qui rendra les frontières pour les autres navigateurs que Firefox).

  3. 3

    Cela permet d'obtenir l'effet de FF. Utiliser le border-radius variantes pour les autres navigateurs.
    Essentiellement, vous utilisez une 3 div système, l'un avec la même couleur de l'arrière-plan.
    Fonctionne seulement pour le fond, avec une couleur unie.

    <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;
    }
  4. 0

    si vous essayez de réaliser ce genre de look(une bulle), il est donc préférable d'utiliser une image pour qu' 🙂

  5. 0

    Il ya des façons que vous pouvez résoudre ce problème en utilisant uniquement CSS. J'ai décidé d'utiliser une technique pour les onglets - mais pourrait être facilement adapté pour les bulles.

    Je couvre d'un exemple de base ici de la façon de faire un Inverse Rayon des Frontières dans le CSS (ici). Il utilise un truc avec la taille de la Frontière pour une utilisation à l'intérieur, vous pourriez avoir à faire quelques positionnement de l'obtenir pour fonctionner correctement cependant comme vous pouvez le voir son possible.