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

is there a way to create a tooltip (with no extra divs) with an inner shadow

is there a way to create a tooltip (with no extra divs) with an inner shadow

Problem

We know how to create a tooltip, something like:

div{
    width: 200px;
    height: 200px; 
    background: red;
    margin: 80px;
    border-radius: 20px;
    position: relative;
    box-shadow: inset 2px 2px 15px black; //this is the problem
}
div:before{
    content: ' ';
    display:block;
    width: 0;
    border-left: red 30px solid;    
    border-right: transparent 30px solid;
    border-bottom: transparent 30px solid;
    border-top: transparent  30px solid;
    position:absolute;
    top: 60px; right: -60px;
}

the code above set the inner Shadow of the div, but not of the sudo element, here is the demo. Is there a way to get the inner shadow to work on the border of the sudo element. Or is there another way t get the effect I need.

I know that if I needed a drop shadow I can apply a filter on the div:

filter: drop-shadow(2px 2px 15px black);

But is there a way to do it for the inner shadow?

Thanks

Problem courtesy of: aurel

Solution

You could try something like this:

live demo

Change the CSS for the pseudo-element to:

div:before{
    content: '';
    display:block;
    width: 60px; height: 60px;
    transform: rotate(45deg);
    background: red;
    position:absolute;
    top: 60px; right: -25px;
    box-shadow: inset -10px 10px 15px -15px black;

}

It's not perfect, but for a subtle effect it works.

Solution courtesy of: Ana

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

is there a way to create a tooltip (with no extra divs) with an inner shadow

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×