css实现优惠券样式

实现优惠券效果：

实现思路：

1. 需要三个盒子元素，使用 css 剪裁，利用 ellipse 属性，将两个盒子分别裁剪成两个半圆，位置固定在另一个盒子元素左右两边适当位置上。
2. 为另一个盒子设置想要的样式，圆角、背景颜色和中间的横虚线等，此处使用的是 uView 。

  
    
    
    
      
      
        
      
      
    
  





.pages {
  width: 95vw;
  position: relative;

  .clip1 {
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: absolute;
    clip-path: ellipse(2% 6% at 0% 38%);
  }

  .clip2 {
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: absolute;
    clip-path: ellipse(2% 6% at 100% 38%);
  }

  .pageChild {
    background-color: rgba($color: #ff0000, $alpha: 0.6);
    border-radius: 10rpx;

    .header {
      height: 85rpx;
      display: flex;
      justify-content:flex-start;
      align-items: center; 
    }

    .line {
      display: flex;
      justify-content:center;
      align-items: center; 
    }

    .body {
      height: 137rpx;
      display: flex;
      flex-direction: row;
      flex-wrap:wrap;
    }
  }
}