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

相关推荐
程序员林北北4 分钟前
【前端进阶之旅】Vue3 + Three.js 实战:从零构建交互式 3D 立方体场景
前端·javascript·vue.js·react.js·3d·typescript
岱宗夫up12 分钟前
【前端基础】HTML + CSS + JavaScript 基础(二)
开发语言·前端·javascript·css·架构·前端框架·html
我是苏苏24 分钟前
Web开发:使用Ocelot+Nacos+WebApi作简单网关鉴权
前端·javascript·ui
SuperEugene36 分钟前
Day.js API 不包含插件API的速查表
前端·javascript·面试
Mr -老鬼36 分钟前
RustSalvo框架上传文件接口(带参数)400错误解决方案
java·前端·python
zheshiyangyang1 小时前
前端面试基础知识整理【Day-9】
前端·面试·职场和发展
笨蛋不要掉眼泪1 小时前
Sentinel 热点参数限流实战:精准控制秒杀接口的流量洪峰
java·前端·分布式·spring·sentinel
Rhystt1 小时前
furryCTF题解|Web方向|ezmd5、猫猫最后的复仇
android·前端·web安全·web