本物のWebフロントエンドエントリ：CSSは、不規則なグラフィックスを（たとえば、ダイアログボックスなど）の影を達成するために

日々の開発で影を追加し、時には美的やハイライトのために、矢印の付いたポップアップダイアログボックスを使用します。不規則なパターンと一緒にスプライシングによって複数の素子を形成することができる、そのようなボックスシャドウプロパティは、要求を満たしていてもよいです。これは、フィルターの下で同様の性質、ドロップシャドウすることをお勧めします。

<div class="triangle">
</div>
.triangle{
    width: 200px;
    height: 60px;
    position: relative;
    filter: drop-shadow(0 0 5px #ccc);
    background-color: #fff;
}
.triangle:after{
    content: "";
    position: absolute;
    left: 20px;
    bottom: -10px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    transform: rotate(45deg);
}
专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划）

レンダリング：

同じような状況下では、ボックスの影に、レンダリング：

即ち三角擬似クラス構成は、斜線の範囲内にありません。

バックドロップシャドウに、下三角の位置の完全な分離と、本体に移動

<前>

.triangle{
    width: 200px;
    height: 60px;
    position: relative;
    filter: drop-shadow(0 0 5px #ccc);
    background-color: #fff;
}
.triangle:after{
    content: "";
    position: absolute;
    left: 20px;
    bottom: -50px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    transform: rotate(45deg);
}

レンダリング：

すなわち、ドロップシャドウは、（サブ要素を含む）全体のプロファイルを変更するための遮光要素です。これは、私たちに影の影響が大きな助けを提供し、複雑なグラフィックスを提供します。

PS：実際の影に近い、透明要素の背景色のドロップシャドウは仕事をしません。透明要素の背景色の箱-shadowがまだ機能しています。