技术栈

css 剪切属性clip-path

百思不得小李2024-06-12 12:27

实现效果如下:

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%);
上一篇:SQL题——连续问题
下一篇:程序员,真有不变的技术和稳定的工作吗?
相关推荐
mCell
1 天前
【短文】不是最强,是最适合
前端·aigc·deepseek
余瑜鱼鱼鱼
1 天前
HTML常用标签总结
前端·html
Jave2108
1 天前
Vue 中 mixins 混合开发的主要使用场景有哪些?
前端·vue.js
徐同保
1 天前
openclaw安装
前端
JEECG低代码平台
1 天前
JeecgBoot低代码平台 Ant Design Vue 4.x 升级避坑指南
前端·vue.js·低代码
yashuk
1 天前
Go-Gin Web 框架完整教程
前端·golang·gin
唐叔在学习
1 天前
e.preventDefault()到底怎么用?
前端·javascript
北寻北爱
1 天前
面试题-vue篇
前端·vue.js
XPoet
1 天前
AI 编程工程化:Skill——给你的 AI 员工装上技能包
前端·后端·ai编程
JEECG低代码平台
1 天前
JeecgBoot低代码平台 Qiankun 微前端集成指南:主应用配置全流程
前端·低代码
热门推荐
01GitHub 镜像站点02Qwen3.5 开源全解析:从 0.8B 到 397B,代际升级 + 全场景选型指南03OpenClaw 使用和管理 MCP 完全指南04OpenClaw macOS 完整安装与本地模型配置教程(实战版)05本地部署 OpenClaw + DeepSeek-R1 完全指南06UV安装并设置国内源07OpenClaw 飞书机器人不回复消息?3 小时踩坑总结08Openclow安装保姆级教程09OpenClaw Control UI安全上下文访问配置10得物前端部门,没了