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

相关推荐
fury_1234 小时前
vue3:数组的.includes方法怎么使用
前端·javascript·vue.js
weixin_405023374 小时前
包资源管理器NPM 使用
前端·npm·node.js
宁&沉沦4 小时前
Cursor 科技感的登录页面提示词
前端·javascript·vue.js
Dragonir5 小时前
React+Three.js 实现 Apple 2025 热成像 logo
前端·javascript·html·three.js·页面特效
peachSoda75 小时前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序
@PHARAOH6 小时前
HOW - 浏览器兼容(含 Safari)
前端·safari
undefined在掘金390416 小时前
flutter 仿商场_首页
前端
少卿6 小时前
react-native图标替换
前端·react native
熊猫钓鱼>_>6 小时前
TypeScript前端架构与开发技巧深度解析:从工程化到性能优化的完整实践
前端·javascript·typescript