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

相关推荐
南囝coding6 分钟前
《独立开发者精选工具》第 018 期
前端·后端
小桥风满袖29 分钟前
极简三分钟ES6 - ES9中for await of
前端·javascript
半花1 小时前
i18n国际语言化配置
前端
编程贝多芬1 小时前
Promise 的场景和最佳实践
前端·javascript
Asort1 小时前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio1 小时前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
南雨北斗1 小时前
JS的对象属性存储器
前端
Lotzinfly1 小时前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
开源之眼1 小时前
React中,useState和useReducer有什么区别
前端
普郎特1 小时前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript