1

次のようなツールチップを作成する方法を知っています。

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

しかし、内側の影のためにそれを行う方法はありますか？

ありがとう

4

2 に答える 2

2

あなたはこのようなことを試すことができます：

ライブデモ

疑似要素の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;

}

完璧ではありませんが、微妙な効果が得られます。

于 2013-03-05T20:31:25.780 に答える
0

次のようなドロップシャドウをいつでも使用できます。

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

または、背景画像を設定できます

私が何らかの形で助けてくれたことを願っています：D

于 2013-03-05T19:59:02.857 に答える