css实现优惠券样式
实现优惠券效果：
实现思路：
- 需要三个盒子元素，使用 css 剪裁，利用 ellipse 属性，将两个盒子分别裁剪成两个半圆，位置固定在另一个盒子元素左右两边适当位置上。
- 为另一个盒子设置想要的样式，圆角、背景颜色和中间的横虚线等，此处使用的是 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>