css实现优惠券样式_css 优惠券

实现优惠券效果：

实现思路：

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

<template>
  <view class="pages">
    <view class="clip1" />
    <view class="clip2" />
    <view class="pageChild">
      <view class="header"/>
      <view class="line">
        <u-line dashed color="#fff" direction="row" length="96%" />
      </view>
      <view class="body"/>
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>
 
<style scoped lang="scss">
.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;
    }
  }
}
</style>