我有一个对话框,在一个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);
}
1条答案
按热度按时间icomxhvb1#
要实现这一点,您需要从对话框中删除框阴影,并将其添加到卡中。要看到卡上的框阴影,您需要删除对话框上的溢出规则。
你可能会想调整盒阴影适合什么。
CSS:
示例:Codepen