css实现轮播图弧形

<template>
  <div id="demo">
    <div class="banner-container">
      <van-swipe
        autoplay="4000"
        ref="swipe"
        style="height: 100%"
        indicator-color="white"
        :show-indicators="bannerData.length > 1"
      >
        <van-swipe-item v-for="(item, index) in bannerData" :key="index">
          <img :src="item.img" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>
<script>
import { Swipe, SwipeItem } from 'vant';
export default {
  name: 'demo',
  computed: {},
  components: {
    'van-swipe': Swipe,
    'van-swipe-item': SwipeItem,
  },
  data() {
    return {
      bannerData: [
        {
          img: require('@/assets/1.jpg'),
        },
        {
          img: require('@/assets/2.jpg'),
        },
      ],
    };
  },
  created() {},
  methods: {},
};
</script>
<style lang="less">
#demo {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .banner-container {
    width: 200%;
    overflow: hidden;
    position: relative;
    left: -50%;
    border-bottom-left-radius: 700px 180px;
    border-bottom-right-radius: 700px 180px;
    height: 150px;
    /deep/ .van-swipe {
      width: 50% !important;
      position: relative;
      left: 25%;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>