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

相关推荐
用户145677561037几秒前
电脑越用越慢?问题可能出在重复文件,一招彻底解决
前端
罗会25 分钟前
TailWindCss安装使用教程
前端
小宁爱Python31 分钟前
Vue入门:vue项目的创建和基本概念
前端·javascript·vue.js
二闹33 分钟前
前端研发岗位PWA相关面试题总结和解析
前端·面试
活着也很快乐1 小时前
Element-plus 离线文档部署
前端
子林super1 小时前
公司日志中心ELK使用指南
前端
ZzMemory1 小时前
少写重复代码的精髓:JS方法借用
前端·javascript·面试
walking9571 小时前
CSS变量(自定义属性)命名规范
前端
猩猩程序员1 小时前
Rust语言Copy trait与Clone trait的区别
前端
一梦浮华1 小时前
自学嵌入式 day37 HTML
前端·html