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 元素的内阴影，这里是演示。有没有办法让内部阴影在 sudo 元素的边框上起作用。或者有没有其他方法可以达到我需要的效果。

我知道如果我需要阴影，我可以在 div 上应用过滤器：

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

但是有没有办法为内部阴影做到这一点？

谢谢

Answer 1

你可以尝试这样的事情：

现场演示

将伪元素的 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;

}

它并不完美，但它可以产生微妙的效果。

Answer 2

你总是可以像这样使用阴影：

-webkit-filter: 阴影(0 1px 4px rgba(0,0,0,9))

或者您可以设置背景图片

希望我能以某种方式帮助：D