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%);
相关推荐
余生H27 分钟前
前端Python应用指南(二)深入Flask:理解Flask的应用结构与模块化设计
前端·后端·python·flask·全栈
outstanding木槿32 分钟前
JS中for循环里的ajax请求不数据
前端·javascript·react.js·ajax
酥饼~39 分钟前
html固定头和第一列简单例子
前端·javascript·html
一只不会编程的猫42 分钟前
高德地图自定义折线矢量图形
前端·vue.js·vue
m0_7482509344 分钟前
html 通用错误页面
前端·html
来吧~1 小时前
vue3使用video-player实现视频播放(可拖动视频窗口、调整大小)
前端·vue.js·音视频
魔术师卡颂1 小时前
最近看到太多 cursor 带来的焦虑,有些话想说
前端·aigc·openai
鎈卟誃筅甡1 小时前
Vuex 的使用和原理详解
前端·javascript
火山方舟1 小时前
解密!企业级智能客服高效运营的秘密武器 | 大模型流程设计与Prompt模版
前端·人工智能·稀土
呆呆小雅1 小时前
二、创建第一个VUE项目
前端·javascript·vue.js