css - 有没有办法创建一个带有内部阴影的工具提示(没有额外的 div)

Question

我们知道如何创建工具提示，例如:

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

上面的代码设置了 div 的内部阴影，而不是 sudo 元素的内部阴影，这里是 demo .有没有办法让内部阴影在 sudo 元素的边界上工作。或者有没有其他方法可以达到我需要的效果。

我知道如果我需要投影，我可以在 div 上应用滤镜:

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

但是对于内阴影有办法吗？

谢谢

Answer 1

你可以尝试这样的事情:

live demo

将伪元素的 CSS 更改为:

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;

}

它并不完美，但对于微妙的效果来说它是有效的。