CSS: Alih keluar drop shadow daripada div dalam dialog Vuetify dengan drop shadow

Question

Saya mempunyai dialog dengan segitiga ditambah menggunakan CSS pada div. Tetapi helah CSS ialah bahagian sempadan itu telus. Masalah yang saya cuba atasi ialah mengeluarkan bayang daripada sempadan lutsinar tanpa mengeluarkan bayang daripada dialog itu sendiri.

Menambahkannya pada div tidak berfungsi:

box-shadow: none;

Berikut adalah gambar yang ingin saya padamkan:

Kelas pada div yang mencipta segitiga ini adalah seperti ini:

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 25px solid white;
}

Kemudian kotak dialog dengan bayang kelihatan seperti ini:

<v-dialog 
  v-model="dialog" 
  max-width="350px"
  persistent
  hide-overlay
>
<div class="arrow-up mb-n1 ml-1"></div>
  <v-card>
    <v-container>
    <v-card-text>
    <v-row>
      <v-col 
        cols="12"
        align="start"
      >
        <p class="text-subtitle-1">
        Always best to start at the beginning, let's pull your products first.</p>
      </v-col>
    </v-row>
    </v-card-text>
      
      <v-card-actions class="mt-n8">
        <v-btn
          color="#68007d"
          text
          @click="closeEverything"
        >
          CLOSE
        </v-btn>
      </v-card-actions>
    </v-container>
  </v-card>
</v-dialog>

v-dialog sendiri mempunyai kelas ini untuk mencipta bayang

.v-dialog {
    border-radius: 4px;
    margin: 24px;
    overflow-y: auto;
    pointer-events: auto;
    transition: .3s cubic-bezier(.25,.8,.25,1);
    width: 100%;
    z-index: inherit;
    outline: none;
    box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
}

Answer 1

Untuk mencapai ini, anda perlu mengalih keluar bayang kotak daripada kotak dialog dan menambahnya pada kad. Untuk melihat bayangan kotak pada kad anda perlu mengalih keluar peraturan limpahan pada kotak dialog.

Anda mungkin mahu melaraskan bayang kotak mengikut kesesuaian.

CSS:

.v-dialog {
  box-shadow: none;
  overflow: visible;
}

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 25px solid white;
  position: relative;
  z-index: 1;
}

.v-sheet.v-card:not(.v-sheet--outlined) {
  box-shadow: 0px -16px 50px -1px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
}

Contoh: Codepen