vuetify v-card 只有两个圆角

Question

我想要一张只有两个角是圆角的 v-card。我尝试了以下但它没有用（卡旋转了 90°）。

模板：

<div class="text-center rotate-ninety ml-n6">
          <v-card 
            hover 
            ripple 
            class="rounded-card py-5 px-2" 
            elevation="10" 
            color="orange" 
          >
              <v-icon 
                color="black" 
                left
              >
                mdi-domain
              </v-icon>
              <span class="black--text">
                Domain
              </span>            
            </v-card>               
          </div>

CSS:

.rotate-ninety {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.rounded-card {
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

我错过了什么吗？

非常感谢克里斯

Answer 1

尝试覆盖 .v-sheet.v-card class 规则，例如：

.rounded-card .v-sheet.v-card {
    border-radius: 25px 25px 0 0;
}

DEMO

Answer 2

使用 Vuetify 自己的 in-built helper classes for border radius.

要获得一张顶级卡片： <v-card tile class="rounded-tr rounded-tl">

vuetify v-card 只有两个圆角

vuetify v-card only two rounded corners

css

vue.js

vuetify.js