CSS: Remove drop shadow from div inside Vuetify dialog with drop shadow

Question

I have a dialog with a triangle added using CSS on a div. But the CSS trick is that part of the border is transparent. The problem I'm trying to overcome is removing the shadow from the transparent border without removing the shadow from the dialog itself.

Adding it to a div doesn't work:

box-shadow: none;

Here is a picture of the content I want to delete:

The class on the div that creates this triangle is like this:

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

Then the dialog box with shadow looks like this:

<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-dialogItself has this class to create shadow

.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

To achieve this you need to remove the box shadow from the dialog box and add it to the card. To see the box shadow on the card you need to remove the overflow rule on the dialog box.

You may want to adjust the box shadow to suit.

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

Example: Codepen