10
votes

Coin arrondi inversé CSS3

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

Peut-être peut être combiné avec Cette 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.

css css-shapes

1 commentaires

Je peux aussi recommander ce didacticiel, ce qui montre des frontières inversées telles qu'elles utilisées pour les onglets: CSS-Tricks.com/better-tabs-with-Round-Out-Borders

5 Réponses :

0
votes

Si vous essayez d'atteindre ce type de regard (un ballon de parole), il est préférable d'utiliser une image pour cela :)

1 commentaires

Une image n'est pas un problème à utiliser pour cela, mais je vous demande spécifiquement si c'est possible avec CSS3.

16
votes

Eh bien, c'est une folie pure, mais il y a certainement des moyens d'y parvenir :-) pas sur le navigateur croisé, mais voyons:

Notre marque: P>

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

3 commentaires

+1 merci gryzzly. Ce n'est pas tout à fait ce que je cherche, mais c'est une technique très cool. S'il vous plaît voir mon édition.

Très agréable! Merci! Je ne suis pas sûr de savoir pourquoi vous voudriez cependant changer de bande dessinée, cependant. C'est l'une des plus belles polices du Web. ;-)

Je l'ai adapté à travailler avec des couleurs remplies, RGBA ... Cela fonctionne dans Firefox et Webkit jsfiddle.net/xpghhh

3
votes

Cela atteint l'effet dans FF. Utilisez les variantes BORDIUS CODE> DE RADIUS CODE> pour les autres navigateurs. Essentiellement, vous utilisez un système 3 div code>, un de la même couleur de l'arrière-plan. Ne fonctionne que pour fond avec une couleur plate.

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

0 commentaires

6
votes

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

GRAYZLYS Le premier exemple n'a pas manipulé des couleurs de fond différentes (pour l'arrière-plan et la bulle).

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

http://jsfiddle.net/tgnfb/

(J'ai également ajouté des propriétés de frontières de rayon de manière à rendre les frontières pour d'autres navigateurs que Firefox).

1 commentaires

C'est une idée brillante, mais malheureusement, cela ne fonctionnera pas si la page a une image de fond.

0
votes

Il existe des moyens de 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é aux bulles de dialogue.

Je couvre un exemple de base ici sur la manière de créer un rayon de bordure inverse dans CSS (ici) . Cela utilise une astuce avec la taille de la frontière pour utiliser l'intérieur, vous pourriez avoir à faire du positionnement pour le faire fonctionner correctement car vous pouvez le voir possible.

0 commentaires