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

相关推荐
鹿人戛7 分钟前
HarmonyOS应用开发:相机预览花屏问题解决案例
android·前端·harmonyos
萌萌哒草头将军22 分钟前
绿联云 NAS 安装 AudioDock 详细教程
前端·docker·容器
GIS之路1 小时前
GIS 数据转换:使用 GDAL 将 GeoJSON 转换为 Shp 数据
前端
朴shu2 小时前
Luckysheet 远程搜索下拉 控件开发 : 揭秘二开全流程
前端
MediaTea3 小时前
Python:模块 __dict__ 详解
开发语言·前端·数据库·python
字节跳动开源3 小时前
Midscene v1.0 发布 - 视觉驱动,UI 自动化体验跃迁
前端·人工智能·客户端
光影少年3 小时前
三维前端需要会哪些东西
前端·webgl
王林不想说话4 小时前
React自定义Hooks
前端·react.js·typescript
heyCHEEMS4 小时前
Uni-app 性能天坑:为什么 v-if 删不掉 DOM 节点
前端
马致良4 小时前
三年前写的一个代码工具,至今已被 AI Coding 完全取代。
前端·ai编程