我有一個對話框，用CSS在一個div上添加了一個三角形。但是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);
}

要做到這一點，你需要從對話框中移除陰影，并將其添加到卡片中。要看到卡片上的方框陰影，您需要移除對話框上的溢出規則。

你可能會想把盒子的陰影調整到合適的程度。

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