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%);
相关推荐
你挚爱的强哥9 小时前
【sgKeyboard】自定义组件:虚拟键盘
前端·javascript·计算机外设
锅里游的鱼吖9 小时前
echarts自定义折线图
前端·javascript·数据库
hunteritself9 小时前
卷卷卷!GPT-6 Sol、Luna 正式发布,OpenAI 开始卷价格了
大数据·前端·人工智能·深度学习·transformer
何何____10 小时前
Vue 全局事件总线详解
前端·javascript·vue.js
涉密IT资质笔记11 小时前
涉密人员脱密期管理规范:期限分级模型、就业限制边界与违规认定标准
java·服务器·前端·网络·数据库
u01110267511 小时前
工具页案例图如何编写 alt让图片说明与处理场景对应
java·前端·javascript·图像处理·人工智能·算法·ai作画
事圆则缓11 小时前
Flutter 状态管理框架对比(五):GetX 的响应式、依赖注册与生命周期
前端·javascript·flutter
广州智造12 小时前
Radioss复合材料使用的单元属性
前端·设计·cad·建模·cae·radioss
张宏宇12 小时前
我把微软开源的 tgrep 做成了本地版 GitHub Code Search:45,629 个文件里搜一次 10ms
前端·后端
huakoh12 小时前
MCP 调用超时后别急着重试:三步读回分清执行状态
前端