css实现漂亮的卡片样式,半圆效果，优惠券效果

css实现漂亮的卡片样式,卡券两端半圆缺口效果

最近项目中遇见了需要在矩形两端挖半圆的卡券设计，一般我们在设计飞机票、小票、火车票、卡券等这类卡片时，都可以用这种漂亮的半圆缺口样式，下面就让我们来看哈效果图和具体的代码吧！

样式效果:

下面一起来看看如何实现吧！

// An highlighted block
<template>
  <div>
    <div class="added-card">
      <div style="height: 180px"></div>
      <div class="added-card-footer">
        <div class="left-circle"></div>
        <div class="left-circletop"></div>
        <div class="right-circle"></div>
        <div class="right-circletop"></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{}
    },
    methods: {

    }
  };
</script>

<style rel="stylesheet/scss" lang="scss">
  .added-card{
    width: 182px;
    height: 244px;
    background: #FFFFFF;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    opacity: 1;
    .added-card-footer{
      position: relative;
      width: 100%;
      height: 48px;
      border-top: 1px solid #EEEEEE;
      .right-circle{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #FFFFFF;
        position: absolute;
        top: -10px;
        right: -10px;
      }
      .right-circletop{
        width: 10px;
        height: 20px;
        border-radius: 10px 0 0 10px;
        background: #FFFFFF;
        box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.12) inset;
        position: absolute;
        top: -10px;
        right: 0px;
      }
      .left-circle{
        @extend .right-circle;
        left: -10px;
      }
      .left-circletop{
        @extend .right-circletop;
        transform: rotate(180deg);
        left: 0px;
      }
    }
  }
</style>

至此，就这样愉快地实现啦！

更：刚发现了一个更好的https://juejin.cn/post/6945023989555134494#heading-1