用css实现点单小程序底部优惠券、购物车不规则图形

1.设计图：


image.png

代码：

 <div
        style={{
          width: '200px',
          height: '170px',
          backgroundColor: '#333', 
          clipPath: 'polygon(0 0, 100% 0%, 80% 100%, 0% 100%)', //依次代表顺序为左上、右上、右下、左下
          borderTopLeftRadius: '50%',
          borderTopRightRadius: '10px',
          borderBottomRightRadius: '10px',
          borderBottomLeftRadius: '50%',
          overflow: 'hidden' //确保 border-radius 的圆角效果不会被 clip-path 覆盖
         }}
      ></div>

效果：


image.png

右边同理，换下裁剪的坐标和圆角位置

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容