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%);
相关推荐
Tongsr4 分钟前
别只混淆代码:用 Kaleido 加固整个 Android Release AAB
前端·算法·github
郭邯9 分钟前
从零到一:我用 AI 写了一个贷款计算器,顺便把等额本息公式彻底搞懂了
前端
汉堡大王952714 分钟前
面试官:讲讲归并排序 —— 为什么它能在面试里反复出现?
前端·javascript·面试
kyriewen20 分钟前
别再只给人写页面了:AI 已经开始自己点你的按钮、填你的表单
前端·javascript·人工智能
天天喝旺仔23 分钟前
Vue 3 组合式 API:从 Options 迁移到 script setup
前端·javascript·vue.js
知了清语25 分钟前
以测试为盾,重构为矛——老旧前端系统迭代中的“测试先行”实践总结
前端
攀小黑1 小时前
vue3+Web Speech API 封装了一个弹窗语音输入
前端·macos·xcode
roamingcode1 小时前
4.5 小时,从一句话需求到可安装的 Chrome 插件:一次 AI 结对开发的完整复盘
前端·人工智能·chrome·claude·codex
️学习的小王1 小时前
Windows Claude Code 接入 Playwright‑MCP,调用本机Edge浏览器(避坑完整教程)
前端·windows·edge
律宏阔2 小时前
CloakBrowser 开发踩坑笔记
前端·浏览器