css 剪切属性clip-path

实现效果如下:

javascript 复制代码
<!DOCTYPE html>
<html>
  <head>
    <style>
      .clipped {
        width: 200px;
        height: 200px;
        background-color: #3498db;
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 30% 100%);
      }
    </style>
  </head>
  <body>
    <div class="clipped"></div>
  </body>
</html>

效果如下:

javascript 复制代码
    width: 171px;
    height: 171px;
    background: linear-gradient(90deg, rgba(0, 68, 145, 0.6) 0%) !important;
    background-color: #3498db;
    clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 20%);
相关推荐
hunterandroid6 分钟前
Jetpack Compose 入门:用声明式 UI 写 Android 页面
前端
以和为贵8 分钟前
前端手写 RAG 踩坑实录:四个让检索"翻车"的坑
前端·人工智能·面试
用户21366100357213 分钟前
Redux异步方案与React性能优化Hooks
前端
假如让我当三天老蒯15 分钟前
TypeScript 继续学习(学习用)
前端·面试·typescript
玄玄子15 分钟前
CSS 浮动引起父元素高度塌陷
前端·css
竹林81818 分钟前
从 ethers.js 到 viem:我在一个 DeFi 看板项目中踩过的所有坑与最终方案
前端·javascript
kyrie2821 分钟前
React Redux 完整用法
前端
程序员鱼皮26 分钟前
Codex 又出王炸功能「录制回放」,实战测评!附原理浅析
前端·后端·ai编程
lichenyang45335 分钟前
AbilityMeta 能力元信息:不只是能调用,还要能看懂
前端
渣波43 分钟前
拒绝黑盒!NestJS + LangChain 实战保姆级拆解,手把手教你搞定双 Token 与 AI 大脑
前端·后端