CSS: Schlagschatten aus Div im Vuetify-Dialog mit Schlagschatten entfernen

Question

Ich habe einen Dialog mit einem Dreieck, das mithilfe von CSS zu einem Div hinzugefügt wurde. Der CSS-Trick besteht jedoch darin, dass ein Teil des Rahmens transparent ist. Das Problem, das ich zu überwinden versuche, besteht darin, den Schatten vom transparenten Rand zu entfernen, ohne den Schatten vom Dialog selbst zu entfernen.

Das Hinzufügen zu einem Div funktioniert nicht:

box-shadow: none;

Hier ist ein Bild von dem, was ich löschen möchte:

Die Klasse für das Div, die dieses Dreieck erstellt, sieht folgendermaßen aus:

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

Dann sieht das Dialogfeld mit Schatten so aus:

<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 selbst hat diese Klasse zum Erstellen von Schatten

.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

要实现此目的，您需要从对话框中删除框阴影并将其添加到卡片中。要看到卡上的框阴影，您需要删除对话框上的溢出规则。

您可能想要将盒子阴影调整到适合的程度。

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

示例： Codepen