CODEWITHSUNDEEP
csscss-shapes
VirtuosiMedia
VirtuosiMedia

Reputation: 53386

CSS3 Inverted Rounded Corner

Is there a way to do an inverted rounded corner in CSS3, something approximately like the bottom left corner in the (crude) drawing below?

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

Perhaps border-radius could be combined with this technique?

Edit: I'm not looking for a speech bubble, but rather just a way to curve the right side of the point on the bottom left.

Upvotes: 10

Views: 13965

Answers (5)

Jon Mifsud
Jon Mifsud

Reputation: 183

There are ways you could solve this issue by using just CSS. I have decided to use a technique for tabs - but could be easily adapted for speech bubbles.

I cover a basic example here of how to make an Inverse Border Radius in CSS (here). This uses a trick with the size of Border to use the inside, you might have to do some positioning to get it to work properly however as you can see its possible.

Upvotes: -1

Misha Reyzlin
Misha Reyzlin

Reputation: 13916

Well, this is pure madness, but certainly there are ways to achieve this :-) not cross-browserly, but let's see:

Our mark-up:

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

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

The result: http://jsfiddle.net/MrLWY/

I have only tested this in Firefox 3.6.3, but the idea is clear :-)

Here is take two:

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

And the result: http://jsfiddle.net/ajeN7/

Perhaps this can be enhanced in many ways:

  • make it cross-browser (+webkit and opera, at least)
  • it could work in IEs, without roundings, though, with help of something like that http://code.google.com/p/ie7-js/ (in order for generated content to work).
  • to find out how it could work with flexible height.
  • to change the font-family declaration :-)

Upvotes: 16

MPV
MPV

Reputation: 1664

I cant comment yet, but so here's a new answer (in regard to Gryzzlys answer):

Gryzzlys first example didn't handle different background colors (for the background and bubble).

But the second one does. Here's an example with background colors applied:

http://jsfiddle.net/tGnfb/

(I also added border-radius properties so that it will render borders for other browsers than Firefox).

Upvotes: 6

nico
nico

Reputation: 51670

This achieves the effect in FF. Use the appropriate border-radius variants for the other browsers. Essentially you use a 3 div system, one with the same color of the background. Does only work for background with a flat color.

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

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

Upvotes: 3

corroded
corroded

Reputation: 21604

if you're trying to achieve that kind of look(a speech balloon) it's best to just use an image for that :)

Upvotes: -1

Related Questions