Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 inverted/reverse rounded corner for a tooltip

CSS3 inverted/reverse rounded corner for a tooltip

Problem

I'm trying to create a tooltip that looks like this using CSS:

reversed rounded corners

This is how i'm trying to solve it: http://jsfiddle.net/NXLuZ/

So, basically i'm using css3 masking:

div:after {
    width: 61px;
    height: 10px;
    background: #fff;
    -webkit-mask-image: radial-gradient(circle 10px at 0px 0, transparent 0, transparent 10px, black 11px);
    top: -10px;
    right: 0px;
    position: absolute;
    content: '';
    display: block;
}

Looks good on regular displays, but you can see the problem when you're viewing it on a retina display or when you're trying to zoom in:

The issue

Because i'm using a gradient as a mask, it looks a bit blurry when the color changes in the gradient. Its important to mention, that the rounded corner needs to be transparent, because the background is not fixed behind it.

Any idea how can i fix this issue?

Problem courtesy of: passatgt

Solution

You can do it with a box shadow:

.demo{
    position: absolute;
    left: 400px;
    top: 106px;
    background: #fff;
    width: 200px;
    height: 200px;
    -moz-border-radius:10px 0 10px 10px;
    -webkit-border-radius:10px 0 10px 10px;
    border-radius:10px 0 10px 10px;
    -moz-box-shadow: 3px 4px 20px rgba(0,0,0,.5);
    -webkit-box-shadow: 3px 4px 20px rgba(0,0,0,.5);
    box-shadow: 3px 4px 20px rgba(0,0,0,.5);    
    line-height:200px;
    text-align:center;
    color:#dbdbdb;
}

.demo:before {
    content: '';
    width: 50px;
    position: absolute;
    right: 0px;
    top: -26px;
    height: 16px;
    background: #fff;
    -moz-border-radius:10px 10px 0 0;
    -webkit-border-radius:10px 10px 0 0;
    border-radius:10px 10px 0 0;
    display: block;
}

.demo:after {
    width: 10px;
    height: 10px;
    background: transparent;
    top: -10px;
    right: 50px;
    position: absolute;
    content: '';
    border-bottom-right-radius: 100%;
    box-shadow: 50px 0px 0px 50px white;
    clip: rect(0px, 60px, 50px, 0px);
    display: block;
}

fiddle

Solution courtesy of: vals

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 inverted/reverse rounded corner for a tooltip

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×