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%);
相关推荐
懒得不想起名字10 分钟前
flutter 使用go_router 和 page_transition定义页面动画
前端
多加点辣也没关系18 分钟前
JavaScript|第6章:流程控制语句
开发语言·前端·javascript
csj5019 分钟前
前端基础之《React(11)—state声明式》
前端·react.js
程序员晓琪19 分钟前
深入解析:从 Webpack 到 Vite,多入口多端项目的工程化迁移实战
前端·webpack·vite
涛涛ing21 分钟前
Vue 3.6 还没正式发布,但前端的方向已经被它定下来了
前端
阿新聊ai23 分钟前
Claude Code 为什么总不懂你的项目?缺一张「项目地图」
前端·后端·面试
暗冰ཏོ32 分钟前
Spring Boot + Vue3 订单支付模块技术实现:支付单、回调验签、幂等处理与余额扣减
前端·spring boot·后端·vue·微信支付·支付宝支付
Csvn35 分钟前
AbortController 不止能取消 Fetch!3 个你不知道的隐藏用法
前端·javascript
爷_41 分钟前
AI Coding Agent 沙箱的设计原理解析
前端·人工智能·后端
爱勇宝43 分钟前
第 3 章:别把团队设计成一场内卷竞赛
前端·后端·程序员