Css 我怎样才能做一个椭圆形的？

我把这个椭圆形放在一张卡片上。这张卡片的屏幕很小，但椭圆形的却不是

我想做的是扩大椭圆形

这是我的CSS：

    <style scoped>
div.oval {
  position: absolute;
  right: 3.3rem;
  top: 10px;
  width: 130px;
  height: 50px;
  -moz-border-radius: 0 50% / 0 100%;
  -webkit-border-radius: 0 50% / 0 100%;
  border-radius: 150px;
  background: #5cb85c;
  border: 3px solid #555;
}
</style>

椭圆形分区{
位置：绝对位置；
右：3.3rem；
顶部：10px；
宽度：130px；
高度：50px；
-moz边界半径：0 50%/0 100%；
-webkit边界半径：0 50%/0 100%；
边界半径：150px；
背景：#5cb85c；
边框：3px实心#555；
}

我使用Vuetify V卡：

    <v-container fluid grid-list-md>
    <v-flex xs12 sm4 md4 lg2>
   <v-card>
       <v-card-title><v-icon>ev-station</v-icon><h4>Estacion</h4></v-card-title>
       <v-divider></v-divider>
       <v-list-tile>
           <v-list-tile-content>
               <div class="oval"></div>
           </v-list-tile-content>
       </v-list-tile>
       <v-list-tile>
           <v-list-tile-content></v-list-tile-content>
       </v-list-tile>
   </v-card>
    </v-flex>
</v-container>

电动汽车站

使用百分比宽度，并保持最小宽度，使其不会超过该限制

div.oval{
位置：绝对位置；
右：3.3rem；
顶部：10px；
最小宽度：70px；
宽度：20%；
高度：50px；
-moz边界半径：0 50%/0 100%；
-webkit边界半径：0 50%/0 100%；
边界半径：150px；
背景：#5cb85c；
边框：3px实心#555；
}

将“宽度”替换为“最小宽度”，并使用“左”而不是“右”。椭圆形的宽度不会改变，因为您给它一个固定的像素宽度。给它一个以百分比表示的宽度，它就会有响应。