CSS3 inverted/reverse rounded corner for a tooltip

Question

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

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:

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?

Answer 1

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