CSS：从具有投影的 Vuetify 对话框内的 div 中删除投影

Question

我有一个对话框，在 div 上使用 CSS 添加了一个三角形。但 CSS 的技巧是边框的一部分是透明的。我试图克服的问题是从透明边框中删除阴影，而不从对话框本身删除阴影。

将其添加到 div 不起作用：

box-shadow: none;

这是我要删除的内容的图片：

创建这个三角形的 div 上的类是这样的：

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

然后有阴影的对话框是这样的：

<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本身就有这个类创建阴影

.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