Css 有没有办法创建带有内部阴影的工具提示（没有额外的div）

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

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

但是，有没有一种方法可以解决内部阴影的问题呢

---

谢谢

您始终可以使用如下阴影：

-webkit过滤器：投影（0 1px 4px rgba（0,0,0,9））

也可以设置背景图像

---

希望我在某些方面有所帮助：D

您可以尝试以下内容：

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

}

---

它不是完美的，但对于一个微妙的效果它是有效的。

像这样的东西？谢谢@Ana，太好了。你能把它作为答案加上吗？这样我就可以勾选它了？再次感谢