css實現(xiàn)漂亮的卡片樣式,卡券兩端半圓缺口效果

最近項目中遇見了需要在矩形兩端挖半圓的卡券設(shè)計，一般我們在設(shè)計飛機票、小票、火車票、卡券等這類卡片時，都可以用這種漂亮的半圓缺口樣式，下面就讓我們來看哈效果圖和具體的代碼吧！

樣式效果:

下面一起來看看如何實現(xiàn)吧！

// 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>

至此，就這樣愉快地實現(xiàn)啦！