CSS: ドロップ シャドウのある Vuetify ダイアログ内の div からドロップ シャドウを削除します

Question

CSS を使用して div に三角形を追加したダイアログがあります。ただし、CSS のトリックは、境界線の一部が透明になることです。私が克服しようとしている問題は、ダイアログ自体から影を削除せずに、透明な境界線から影を削除することです。

div に追加しても機能しません:

リーリー

これは削除したいコンテンツの写真です:

この三角形を作成する div のクラスは次のようになります:

リーリー

そうすると、影付きのダイアログ ボックスは次のようになります:

リーリー

v-dialogそれ自体にシャドウを作成するためのクラスがあります

ああああ

Answer 1

これを実現するには、ダイアログ ボックスからボックス シャドウを削除し、カードに追加する必要があります。カード上にボックスの影を表示するには、ダイアログ ボックスのオーバーフロー ルールを削除する必要があります。

ボックスの影を必要に応じて調整することもできます。

CSS：

リーリー

例: コードペン