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%);
相关推荐
兆子龙4 分钟前
【React】19 深度解析:掌握新一代 React 特性
前端·架构
Moment24 分钟前
MinIO已死,MinIO万岁
前端·后端·github
无双_Joney28 分钟前
心路散文 - 转职遇到AI浪潮,AIGC时刻人的价值是什么?
前端·后端·架构
有意义1 小时前
深度拆解分割等和子集:一维DP数组与倒序遍历的本质
前端·算法·面试
小怪点点1 小时前
vue3使用
前端·vue.js
Bigger2 小时前
CSS 这些年都经历了什么?一次看懂 CSS 的演化史
前端·css·前端工程化
DevUI团队2 小时前
🚀 【Angular】MateChat V20.2.2版本发布,新增8+组件,欢迎体验~
前端·javascript·人工智能
嚴寒2 小时前
前端配环境配到崩溃?这个一键脚手架让我少掉了一把头发
前端·react.js·架构
DevUI团队2 小时前
🚀 MateChat V1.11.0 震撼发布!新增工具按钮栏组件及体验问题修复,欢迎体验~
前端·javascript·人工智能
看晴天了2 小时前
新框架electronbun项目入门指南,解决electron体积大的难题,Electrobun:Electron 的轻量级革命 —— 12MB 应用 +
前端·架构