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

相关推荐
前端小咸鱼一条25 分钟前
16.迭代器 和 生成器
开发语言·前端·javascript
小江的记录本1 小时前
【注解】常见 Java 注解系统性知识体系总结(附《全方位对比表》+ 思维导图)
java·前端·spring boot·后端·spring·mybatis·web
web守墓人1 小时前
【前端】记一次将ruoyi vue3 element-plus迁移到arco design vue的经历
前端·vue.js·arco design
伊步沁心1 小时前
Webpack & Vite 深度解析
前端
libokaifa1 小时前
OpenSpec + TDD:让 AI 写代码,用测试兜底
前端·ai编程
用户15815963743701 小时前
搭 AI Agent 团队踩了 18 个坑,总结出这 5 个关键步骤
前端
Kellen1 小时前
Fumadocs 基础概念:从内容源到页面渲染
前端
Lee川1 小时前
前端进阶之路:从性能优化到响应式布局的实战指南(Tailwindcss)
前端·面试
努力干饭中1 小时前
Git Rebase 最佳实践
前端·git
Ferries1 小时前
《从前端到 Agent》系列|02:应用层-提示词工程 (Prompt Engineering)
前端·人工智能·深度学习