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强烈推荐

相关推荐
hkNaruto1 小时前
【AI】基于大模型的AI游戏地图生成、控制方案:AI Native Game Harness 迁移操作手册
前端·人工智能·游戏
IT_陈寒1 小时前
Java序列化踩坑记:对象循环引用让我加班两小时
前端·人工智能·后端
Acro1 小时前
快给macOS 上的Grok Bot换一套皮肤
前端
flash俊杰1 小时前
双引擎 OCR 编排:逐页判定、视觉优先、partial 语义与三层超时
前端
计算机魔术师1 小时前
Reddit 每周被 Google 偷走 100 万次点击,CEO 摊牌了
前端
前端繁华如梦1 小时前
用 React Three Fiber 做一栋能编辑的教学楼数字孪生
前端
前端繁华如梦1 小时前
用 React Three Fiber 做一套智慧医院数字孪生:编辑器、大屏和 BIM 浏览器
前端
俊昭喜喜里3 小时前
理解全局跨域CORS配置
前端
锋行天下6 小时前
DeepSeek写Langgraph就是个大傻逼,一本正经胡说八道
前端·人工智能·后端
jktantan6 小时前
每个节点 41 字节:把一棵百万节点树拆进 14 个 typed array
前端·javascript·vue.js·算法·typescript