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

相关推荐
程序员爱钓鱼13 小时前
Node.js 编程实战:Node.js + React Vue Angular 前后端协作实践
前端·后端·node.js
程序员爱钓鱼13 小时前
Node.js 编程实战:前后端结合的 SSR 服务端渲染
前端·后端·node.js
haokan_Jia13 小时前
Java 并发编程-ScheduledFuture
java·前端·python
bst@微胖子13 小时前
CrewAI+FastAPI实现多Agent协作项目
java·前端·fastapi
掘金酱13 小时前
TRAE 2025 年度报告分享活动|获奖名单公示🎊
前端·人工智能·后端
jqq66613 小时前
解析ElementPlus打包源码(三、打包类型)
前端·javascript·vue.js
白哥学前端14 小时前
独立开发实战:我用 AI 写了一个台球小程序
前端·后端·trae
陳陈陳14 小时前
React 性能优化双子星:useMemo 与 useCallback 的正确打开方式
前端·javascript·react.js
持续前行14 小时前
JavaScript 数组中删除偶数下标值的多种方法
前端·javascript·vue.js
baozj14 小时前
给 Ant Design Vue 装上"涡轮增压":虚拟列表封装实践
前端·javascript·vue.js