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%);
相关推荐
全栈老石1 分钟前
TypeScript 中 Type 和 Interface 傻傻分不清?看完这篇就不纠结了
前端·typescript
沈千秋.5 分钟前
xss.pwnfunction.com闯关(1~6)
java·前端·xss
浪浪山_大橙子9 分钟前
吃透 CSS 常用函数:从布局到美化,18 个高频函数让样式写得又快又优雅
前端
我是ed.10 分钟前
Vue3 图片标注插件 AILabel
前端·vue3·标注·ailabel
晚星star12 分钟前
《深入浅出 Node.js》第四章:异步编程 详细总结
前端·node.js
无心使然12 分钟前
vant实现自定义日期时间选择器(年月日时分秒)
前端·vue.js
鱼鱼块12 分钟前
React 组件通信实战:从 props 入门到父子协作闭环
前端·react.js·面试
龙猫不热15 分钟前
THREE.js 关于Material基类下的depthTest 和 depthWrite的理解
前端·three.js
前端程序猿之路24 分钟前
简易版AI知识助手项目 - 构建个人文档智能问答系统
前端·人工智能·python·ai·语言模型·deepseek·rag agent