css实现一个带半圆形状的卡片

1.实现效果

2.实现原理

半圆+伪元素
虚线和半圆是连在一起的，且高度不定，将虚线设为border-bottom，dashed，以这个view为基准，设置伪元素的定位。

3.实现代码

<view class="card">
  <view class="top">
    <view class="title">
      <span></span>
      <text>卡券定义</text>
      <span></span>
    </view>
  </view>
  <view class="bottom"></view>
</view>

page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #57D4F4;
}

.card {
  width: 683rpx;
  height: 856rpx;
  background: #FFFFFF;
  border-radius: 40rpx;
  box-sizing: border-box;
  padding: 0 24rpx;
}

.top {
  box-sizing: border-box;
  height: 475rpx;
  padding-top: 40rpx;
  border-bottom: 1px dashed #66E0FE;
  position: relative;
}

.top::before {
  content: '';
  position: absolute;
  width: 22rpx;
  height: 44rpx;
  background: #57D4F4;
  left: -24rpx;
  bottom: -24rpx;
  border-radius: 0 22rpx 22rpx 0;
  /* 左上、右上、右下、左下 */
}

.top::after {
  content: '';
  position: absolute;
  width: 22rpx;
  height: 44rpx;
  background: #57D4F4;
  right: -24rpx;
  bottom: -24rpx;
  border-radius: 22rpx 0 0 22rpx;
  /* 左上、右上、右下、左下 */
}

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

}

.title text {
  font-size: 30rpx;
  font-weight: 600;
  color: #147ABE;
  padding: 0 13rpx 0 20rpx;
}

.title span {
  width: 21rpx;
  height: 21rpx;
  background: #7FE0F7;
  border-radius: 50%;
  position: relative;
}

.title span::after {
  content: '';
  position: absolute;
  width: 14rpx;
  height: 14rpx;
  background: rgba(255, 190, 85, 0.58);
  border-radius: 50%;
  bottom: 0;
  right: -7rpx;
}

4.写在最后🍒

看完本文如果觉得有用，记得点赞+关注+收藏鸭 🍕

更多小程序相关，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~