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

相关推荐
cxxcode1 分钟前
前端模块化发展
前端
不务正业的前端学徒5 分钟前
docker+nginx部署
前端
不务正业的前端学徒11 分钟前
webpack/vite配置
前端
hhcccchh27 分钟前
学习vue第八天 Vue3 模板语法和内置指令 - 简单入门
前端·vue.js·学习
yyf1989052529 分钟前
Vue 框架相关中文文献
前端·javascript·vue.js
粥里有勺糖35 分钟前
开发一个美观的 VitePress 图片预览插件
前端·vue.js·vitepress
陟上青云1 小时前
一篇文章带你搞懂原型和原型链
前端
我的写法有点潮1 小时前
推荐几个国外比较流行的UI库(上)
前端·javascript·css
鹏多多1 小时前
jsx/tsx使用cssModule和typescript-plugin-css-modules
前端·vue.js·react.js
ssshooter2 小时前
复古话题:Vue2 的空格间距切换到 Vite 后消失了
前端·vue.js·面试