css不规则圆角矩形

javascript 复制代码
   <div class="skew"></div>
css 复制代码
.skew {
  position: relative;
  width: 120px;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 40px;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    background: orange;
    transform: skewX(164deg);
    width: 100px;
    height: 100px;
  }
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 13px;
    width: 100px;
    height: 100px;
    border-radius: 20px;
    background: orange;
  }
}

这个收集的css 效果是真的多 https://github.com/chokcoco/iCSS强烈推荐

相关推荐
CC码码几秒前
前端字符串排序搜索可以更加细化了
前端·javascript·面试
喵爱吃鱼几秒前
kuma-ui中Flex vs FlexMin的关键区别
前端
codingMan3 分钟前
[Android Compose] 拒绝闪烁!打造丝滑的聊天页面列表(仿微信效果)
前端
你别追我跑不动5 分钟前
基于代码扫描的 Icon 优化实践
前端·性能优化
磊磊磊磊磊6 分钟前
用AI做了个排版工具,分享一下如何高效省钱地用AI!
前端·后端·react.js
喵爱吃鱼7 分钟前
flex 0 flex 1 flex none flex auto 应该在什么场景下使用
前端
雾散声声慢9 分钟前
解决 iOS 上 Swiper 滑动图片闪烁问题:原因分析与最有效的修复方式
前端·css·ios
Crystal32813 分钟前
冒泡排序 bubble sort
前端·javascript·面试
阿蓝灬27 分钟前
clientWidth vs offsetWidth
前端·javascript
一代明君Kevin学长37 分钟前
快速自定义一个带进度监控的文件资源类
java·前端·后端·python·文件上传·文件服务·文件流