CSS : Supprimez l'ombre portée de div dans la boîte de dialogue Vuetify avec l'ombre portée

Question

J'ai une boîte de dialogue avec un triangle ajouté en utilisant CSS sur un div. Mais l’astuce CSS est qu’une partie de la bordure est transparente. Le problème que j'essaie de résoudre est de supprimer l'ombre de la bordure transparente sans supprimer l'ombre de la boîte de dialogue elle-même.

L'ajouter à un div ne fonctionne pas :

box-shadow: none;

Voici une photo de ce que je souhaite supprimer :

La classe sur le div qui crée ce triangle est comme ceci :

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

Ensuite, la boîte de dialogue avec l'ombre ressemble à ceci :

<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 lui-même a ce cours pour créer des ombres

.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

Pour y parvenir, vous devez supprimer l'ombre de la boîte de dialogue et l'ajouter à la carte. Pour voir l'ombre de la boîte sur la carte, vous devez supprimer la règle de débordement dans la boîte de dialogue.

Vous souhaiterez peut-être ajuster l’ombre de la boîte en fonction.

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

Exemple : Codepen