CSS3 Inverted Rundes Eck

Question

Gibt es eine Möglichkeit, um eine umgekehrte abgerundete Ecke in CSS3, etwas in etwa wie die unteren linken Ecke in dem (roh) Zeichnung unten zu tun?

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

Vielleicht border-radius könnte mit dieser Technik kombiniert werden, ?

Edit:. Ich bin nicht für eine Sprechblase suchen, sondern nur ein Weg, um Kurve auf der rechten Seite des Punktes auf der unteren linken

Answer 1

Nun, das ist reiner Wahnsinn, aber sicherlich gibt es Möglichkeiten, diese :-) kein Kreuz browserly zu erreichen, aber sie sieht:

Unser Aufschlag:

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

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

Das Ergebnis: http://jsfiddle.net/MrLWY/

Ich habe dies nur getestet in Firefox 3.6.3, aber die Idee ist klar: -)

ist zwei Hier nehmen:

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

Und das Ergebnis: http://jsfiddle.net/ajeN7/

Vielleicht kann dies in vielerlei Hinsicht verbessert werden:

• macht es Cross-Browser (+ webkit und Oper, zumindest)
• könnte es in IEs arbeiten, ohne Abrundungen, aber mit Hilfe von so etwas wie die http: //code.google.com/p/ie7-js/ (damit generierten Inhalt an der Arbeit).
• um herauszufinden, wie es mit flexiblen Höhe arbeiten könnte.
• die font-family Erklärung ändern: -)

Answer 2

Ich kann noch sagen, aber so ist hier eine neue Antwort (in Bezug auf Gryzzlys Antwort):

Gryzzlys erstes Beispiel hat die nicht unterschiedliche Hintergrundfarben (für den Hintergrund und Blase).

Aber der zweite Fall ist. Hier ist ein Beispiel mit Hintergrundfarben verwendet:

http://jsfiddle.net/tGnfb/

(I auch border-radius-Eigenschaften hinzugefügt, so dass es Grenzen für anderen Browser als Firefox machen wird).

Answer 3

Dies erzielt die Wirkung in FF. Verwenden Sie die entsprechenden border-radius Varianten für die anderen Browsern. Im Wesentlichen verwenden Sie ein 3 div System, einen mit der gleichen Farbe des Hintergrunds. Funktioniert nur für den Hintergrund mit einer flachen Farbe.

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

Und die 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

Wenn Sie diese Art von Aussehen erreichen wollen (eine Sprechblase) ist es am besten, nur ein Bild verwendet für diese:)

Answer 5

Es gibt Möglichkeiten, wie Sie dieses Problem, indem mit nur CSS lösen könnten. Ich habe beschlossen, eine Technik für die Registerkarten zu verwenden -. Aber könnte leicht für Sprechblasen angepasst werden

I decken ein einfaches Beispiel hier, wie eine machen Inverse Border Radius in CSS (hier) . Dabei wird ein Trick mit der Größe der Grenze um das Innere zu verwenden, können Sie einige Positionierung tun müssen, um es richtig aber zu arbeiten, wie Sie ihre möglich sehen können.