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

相关推荐
咸鱼翻身小阿橙几秒前
高斯模糊降噪/磨皮算法降噪图像
前端·opencv·算法·webpack·c#
ct9783 分钟前
ES6 新特性
前端·vue.js·性能优化
KaMeidebaby9 分钟前
卡梅德生物技术快报|抗原如何自己检测?FAdV-4 重组抗原制备与 ELISA 体系技术调试指南
前端·人工智能·物联网·算法·百度
一拳不是超人12 分钟前
AI 辅助研发时代,如何用“规范 Skill”缩短测试周期
前端·人工智能·代码规范
夜郎king2 小时前
湖南高考天气查询:基于 HTML5 与百度天气 API 实现页面展示
前端·html5·百度天气实践·天气信息可视化
云水一下9 小时前
TypeScript 从零基础到精通(五):高级类型与泛型
前端·javascript·typescript
counterxing9 小时前
vibe coding 之后,我更不想打字了
前端·agent·ai编程
copyer_xyf10 小时前
Python 模块与包的导入导出
前端·后端·python
研☆香10 小时前
es6新特性功能介绍(四)
前端·ecmascript·es6
微扬嘴角10 小时前
React篇1--JSX语法规则、组件、组件实例的3大特性
前端·react.js·前端框架