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

相关推荐
Bug.ink14 分钟前
BUUCTF——WEB(4)
前端·网络安全·靶场·ctf·buuctf
L Jiawen15 分钟前
【Web】RESTful风格
前端·后端·restful
momo(激进版)21 分钟前
前端打包时自动更新版本号
前端
胖虎126 分钟前
UIKit实现一个渐变文字的UILabel(核心思想及实现过程)
前端·mask·渐变文字·ios渐变文字·渐变label
alphardex35 分钟前
一个普通魔法师的 2025 年度总结
前端·年终总结
德莱厄斯1 小时前
AI 纪元 3 年,2025 论前端程序员自救
前端·ai编程·vibecoding
WX-bisheyuange1 小时前
基于Spring Boot的社团管理系统的设计与实现
前端·javascript·vue.js·毕业设计
橙某人1 小时前
LogicFlow 插件魔改实录:手把手教你重写动态分组(DynamicGroup)🛠️
前端·javascript·vue.js
阿蔹1 小时前
UI测试自动化-Web-Python-Selenium-2-元素操作、浏览器操作
前端·python·selenium·ui·自动化
谎言西西里2 小时前
React hooks 之 一篇文章掌握 useState 和 useEffect 的核心机制
前端·react.js