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

相关推荐
AdleyTales11 小时前
vscode识别不了@提示找不到路径解决
前端·javascript·vscode
去哪儿技术沙龙12 小时前
去哪儿网前端代码自动生成技术实践
前端·ai编程
前端九哥12 小时前
装个依赖把公司电脑干报废了?npm i 到底背着我干了啥?
前端·javascript
溪海莘12 小时前
React入门:跟读官方快速入门教程(前端小白)
前端·react.js·前端框架
绝世唐门三哥12 小时前
工具函数-精准判断美东交易时间
前端·javascript·vue.js
Moment12 小时前
如何一次性生成 60 种语气表达?RWKV 模型告诉你答案 ❗❗❗
前端·后端·aigc
踢球的打工仔12 小时前
typescript-null和undefined
前端·javascript·typescript
前端小蜗12 小时前
对不起,我很贱:老板还没催,我自己就统计《GitLab年度代码报告》
前端·javascript·人工智能
佛系打工仔13 小时前
绘制K线第三章:拖拽功能实现
android·前端·ios
cauyyl13 小时前
react 项目检查国际化配置脚本
前端·react.js·前端框架