live demo

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;

}

这不是完美的，但是为了产生微妙的效果。

Answer 2

您可以随时使用这样的投影：

-webkit-filter：drop-shadow（0 1px 4px rgba（0,0,0,9））

或者您可以设置背景图片

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

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

2 个答案:

live demo