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

相关推荐
小画家~44 分钟前
vue3 里面的 itemList.reduce
前端·数据结构·算法
锋行天下1 小时前
langgraph 循环节点的静态和动态实现
前端·后端
keyipatience1 小时前
JS学习笔记(2)数组,函数,作用域,对象
前端·javascript·笔记·学习·html
2603_965148111 小时前
商品价格监控 API 接口:从原理到实战的完整指南
java·前端·数据库·python·生活
酷虎软件2 小时前
视频加字幕怎么制作
java·前端·音视频
Geoffwo2 小时前
robotjs0.6.0鼠标中轴滚动失效修复方案
前端·javascript
彭亚川Allen2 小时前
从零手搓 RAG 之文档解析技术
前端·后端·架构
oicola2 小时前
Ant Design v5 vs Tailwind CSS:组件库与样式框架的终极对决
前端·css
溪语流沙2 小时前
【Web全栈进阶】Vue Router + Pinia:SPA路由与全局状态
前端·javascript·vue.js
ManageEngineITSM2 小时前
工单优先级怎么定?影响×紧急度矩阵的设计与落地方法
java·大数据·运维·前端·数据库·变更管理