用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

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

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

推荐阅读更多精彩内容