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%);
相关推荐
invicinble17 分钟前
对于前端数据的生命周期的认识
前端
PieroPc21 分钟前
用FastAPI 后端 和 HTML/CSS/JavaScript 前端写一个博客系统 例
前端·html·fastapi
名字越长技术越强23 分钟前
html\css\js(一)
javascript·css·html
hunter145027 分钟前
2026.1.4 html简单制作
java·前端·笔记·html
鹏程十八少28 分钟前
Android 深入剖析Android内存泄漏:ViewPager2与Fragment的生命周期陷阱
android·前端·app
李少兄28 分钟前
深入理解 CSS opacity 属性
前端·css
幺零九零零30 分钟前
前端测试·1
前端
1024小神32 分钟前
uniapp项目中使用vue3和小程序组件父子通信
前端·小程序·uni-app
Knight_AL33 分钟前
Vue + Spring Boot 项目添加 /wvp 前缀的完整链路解析(从浏览器到静态资源)
前端·vue.js·spring boot
粟悟饭&龟波功33 分钟前
【软考系统架构设计师】九、架构演化与维护
前端·后端·架构·系统架构·软件工程