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

相关推荐
大家的林语冰10 分钟前
👍 Rust 为 Node 插上翅膀,反超 Bun 和 pnpm,一体化工具我也有!
前端·javascript·node.js
坐而论道_27 分钟前
兼容低版本 Android:让现代 Web 应用在旧 WebView 上稳定运行
前端·面试
ssshooter1 小时前
Promise 和 async/await 被 try-catch 包裹时的行为差异
前端·javascript·面试
肖志-AI全栈1 小时前
从零讲透 Ajax:XHR、Fetch、JSON 序列化到异步编程全链路
前端·ajax·json
yyt3630458411 小时前
KlineChartQuant Tooltip 高频交互 200FPS 性能优化完整复盘
前端·经验分享·性能优化·typescript·vue·交互·chrome devtools
2601_963771371 小时前
WordPress SEO Guide: Boost Rankings Without Technical Jargon
前端·php
李顿波1 小时前
Chrome 扩展程序 MV3 架构组件概览
前端·chrome·浏览器插件
KingCodeHan2 小时前
ESLint 完全指南:从入门到精通
前端
GHL2842710902 小时前
安装chrome浏览器
前端·chrome
谙忆10242 小时前
WebCodecs 实战:用 ImageDecoder 和 VideoFrame 在浏览器里做硬件加速的帧处理
前端