css 切角实现（全）

  • 效果
    在这里插入图片描述
  • 样式代码
<template><div class="container"><div class="clip-all-angle"> 4个角全部剪切 </div><div class="clip-two-angle"> 切底部两个角 </div><div class="clip-two-top-angle"> 切顶部两个角 </div><div class="clip-remove-top-left-angle"> 切除了左上外3个角 </div><div class="clip-remove-top-right-angle"> 切除了右上外3个角 </div><div class="clip-remove-bottom-left-angle"> 切除了左下外3个角 </div><div class="clip-remove-bottom-right-angle"> 切除了右下外3个角 </div><div class="clip-top-left"> 左上角切角 </div><div class="clip-top-right"> 右上角切角 </div><div class="clip-bottom-right"> 右下角切角 </div><div class="clip-bottom-left"> 左下角切角 </div><div class="clip-top-left-to-bottom-right"> 左上-右下角对切角 </div><div class="clip-top-right-to-bottom-left"> 右上-左下角对切角 </div><div class="clip-two-angle2"> 切底部两个角内部加背景 </div></div>
</template><script setup lang="ts"></script><style style="scss" scoped>
.container {width: 100vw;display: flex;align-items: center;flex-wrap: wrap;justify-content: center;padding: 10px;div {margin-right: 20px;}
}
.clip-all-angle {width: 250px;height: 100px;margin-bottom: 10px;text-align: center;line-height: 100px;clip-path: polygon(15px 0px,calc(100% - 15px) 0,100% 15px,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 calc(100% - 15px),0 15px);background:linear-gradient(-45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom right,linear-gradient(45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom left,linear-gradient(135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top left,linear-gradient(-135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top right;border: 1px solid #a9c1d2;
}
.clip-two-angle {width: 250px;height: 100px;margin-bottom: 10px;text-align: center;line-height: 100px;border: 1px solid #a9c1d2;clip-path: polygon(15px 0px,100% 0,100% 15px,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 calc(100% - 15px),0 0);background:linear-gradient(-45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom right,linear-gradient(45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom left;
}
.clip-two-top-angle {width: 250px;height: 100px;margin-bottom: 10px;text-align: center;line-height: 100px;border: 1px solid #a9c1d2;clip-path: polygon(15px 0px,calc(100% - 15px) 0,100% 15px,100% 100%,calc(100% - 15px) 100%,15px 100%,0 100%,0 15px);background:linear-gradient(135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top left,linear-gradient(-135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top right;
}
.clip-remove-top-left-angle {width: 250px;height: 100px;margin-bottom: 10px;text-align: center;line-height: 100px;border: 1px solid #a9c1d2;clip-path: polygon(0 0px,calc(100% - 15px) 0,100% 15px,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 calc(100% - 15px),0 15px);background:linear-gradient(-45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom right,linear-gradient(45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom left,linear-gradient(-135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top right;
}
.clip-remove-top-right-angle {width: 250px;height: 100px;margin-bottom: 10px;text-align: center;line-height: 100px;border: 1px solid #a9c1d2;clip-path: polygon(15px 0px,100% 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 calc(100% - 15px),0 15px);background:linear-gradient(-45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom right,linear-gradient(45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom left,linear-gradient(135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top left;
}
.clip-remove-bottom-left-angle {width: 250px;height: 100px;margin-bottom: 10px;text-align: center;line-height: 100px;border: 1px solid #a9c1d2;clip-path: polygon(15px 0px,calc(100% - 15px) 0,100% 15px,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 calc(100% - 15px),0 15px);background:linear-gradient(-45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom right,linear-gradient(135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top left,linear-gradient(-135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top right;
}
.clip-remove-bottom-right-angle {width: 250px;height: 100px;margin-bottom: 10px;text-align: center;line-height: 100px;border: 1px solid #a9c1d2;clip-path: polygon(15px 0px,calc(100% - 15px) 0,100% 15px,100% 100%,100% 100%,15px 100%,0 calc(100% - 15px),0 15px);background:linear-gradient(45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom left,linear-gradient(135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top left,linear-gradient(-135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top right;
}
.clip-top-left {width: 250px;height: 100px;margin-bottom: 10px;text-align: center;line-height: 100px;border: 1px solid #a9c1d2;clip-path: polygon(15px 0,100% 0,100% 0,100% 100%,100% 100%,0 100%,0 calc(100% - 15px),0 15px);background: linear-gradient(135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top left;
}
.clip-top-right {width: 250px;height: 100px;margin-bottom: 10px;text-align: center;line-height: 100px;border: 1px solid #a9c1d2;clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0% 100%, 0 100%, 0 0);background: linear-gradient(-135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top right;
}
.clip-bottom-right {width: 250px;height: 100px;margin-bottom: 10px;text-align: center;line-height: 100px;border: 1px solid #a9c1d2;clip-path: polygon(0 0,100% 0,100% 15px,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 100%,0 0);background: linear-gradient(-45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom right;
}
.clip-bottom-left {width: 250px;height: 100px;margin-bottom: 10px;text-align: center;line-height: 100px;border: 1px solid #a9c1d2;clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 15px 100%, 0 calc(100% - 15px), 0 0);background: linear-gradient(45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom left;
}
.clip-top-left-to-bottom-right {width: 250px;height: 100px;margin-bottom: 10px;text-align: center;line-height: 100px;border: 1px solid #a9c1d2;clip-path: polygon(15px 0,100% 0,100% 15px,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 calc(100% - 15px),0 15px);background:linear-gradient(-45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom right,linear-gradient(135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top left;
}
.clip-top-right-to-bottom-left {width: 250px;height: 100px;margin-bottom: 10px;text-align: center;line-height: 100px;border: 1px solid #a9c1d2;clip-path: polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,15px 100%,0 calc(100% - 15px),0 0);background:linear-gradient(45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom left,linear-gradient(-135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top right;
}
.clip-two-angle2 {width: 250px;height: 280px;margin-bottom: 10px;text-align: center;line-height: 280px;border: 1px solid transparent;clip-path: polygon(15px 0px,100% 0,100% 15px,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 calc(100% - 15px),0 0);background:linear-gradient(-45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom right,linear-gradient(45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom left,linear-gradient(180deg, #dceefe 0%, #edf1fa 100%);border-top: none;border-image: linear-gradient(180deg, rgba(169, 193, 210, 0), rgba(169, 193, 210, 1)) 2 2;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/457372.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

新鲜出炉，ECCV2024.9.25 首次提出基于 YOLO 目标检测的无源域自适应

新鲜出炉，ECCV2024.9.25 首次提出基于 YOLO 目标检测的无源域自适应

原文标题&#xff1a;Source-Free Domain Adaptation for YOLO Object Detection 中文标题&#xff1a;基于 YOLO 目标检测的无源域自适应 论文地址&#xff1a; https://arxiv.org/abs/2409.16538 代码地址&#xff1a; GitHub - vs-cv/sf-yolo 1、Abstract 无源域自适应&…
阅读更多...
ACL访问控制

ACL访问控制

要求&#xff1a; PC1与PC2不能通信。PC1可以和PC3通信。PC2可以和PC3通信。 1. VLAN配置 根据拓扑图的连接&#xff0c;PC1、PC2、PC3属于不同的VLAN。我们需要确保交换机上的端口已经正确划分到不同的VLAN。假设交换机接口的VLAN配置已经完成&#xff08;其他博文有)&…
阅读更多...
【Linux】线程池详解及其基本架构与单例模式实现

【Linux】线程池详解及其基本架构与单例模式实现

目录 1.关于线程池的基本理论 1.1.线程池是什么&#xff1f; 1.2.线程池的应用场景&#xff1a; 2.线程池的基本架构 2.1.线程容器 2.2.任务队列 2.3.线程函数&#xff08;HandlerTask&#xff09; 2.4.线程唤醒机制 3.添加单例模式 3.1.单例模式是什么&…
阅读更多...
多IP访问网站

多IP访问网站

1.创建挂载点 mount /dev/sr0 /mnt vim /etc/yum.repos.d/base.repo [BaseOS] nameBaseOS baseurlfile:///mnt/BaseOS gpgcheck0 [Appstream] nameAppStream baseurlfile:///mnt/AppStream gpgcheck0 2.关闭防火墙等 systemctl stop firewalld setenforce 0 3.下载nginx…
阅读更多...
【我的 PWN 学习手札】setcontext + shellcode

【我的 PWN 学习手札】setcontext + shellcode

目录 一、setcontext gadget 二、setcontext shellcode &#xff08;一&#xff09;覆写__free_hook为setcontext53 &#xff08;二&#xff09;在堆块布置了一块sigframe &#xff08;三&#xff09;覆写__free_hook0x8__free_hook0x10 &#xff08;四&#xff09;从__…
阅读更多...
流媒体协议.之（RTP，RTCP，RTSP，RTMP，HTTP）（一）

流媒体协议.之（RTP，RTCP，RTSP，RTMP，HTTP）（一）

闲着没事做&#xff0c;记录一下开发项目用过的协议&#xff0c;项目中&#xff0c;大多是是实时显示播放的&#xff0c;通过私有协议&#xff0c;传输到上位机&#xff0c;实时播放&#xff0c;延时小于200ms&#xff0c;仿照这些协议&#xff0c;定义的数据格式。如果用这些协…
阅读更多...
新王Claude 3.5的6大应用场景

新王Claude 3.5的6大应用场景

Anthropic AI深夜发布了备受期待的Claude 3.5系列更新&#xff0c;包括了全新升级的Claude 3.5 Sonnet和首发的Claude 3.5 Haiku。 Claude 3.5 Sonnet能够理解细微的指令和上下文&#xff0c;识别并纠正自身错误&#xff0c;还能从复杂数据中生成深入的分析和洞察。 结合最先进…
阅读更多...
10.22.2024刷华为OD C题型（三）--for循环例子

10.22.2024刷华为OD C题型（三）--for循环例子

脚踝动了手术&#xff0c;现在宾馆恢复&#xff0c;伤筋动骨一百天还真不是说笑的&#xff0c;继续努力吧。 文章目录 靠谱的车灰度图恢复灰度图恢复 -- for循环使用例子 靠谱的车 https://www.nowcoder.com/discuss/564514429228834816 这个题目思路不难&#xff0c;就是要自…
阅读更多...
手把手教你安装最强文生图工具ComfyUI

手把手教你安装最强文生图工具ComfyUI

ComfyUI 是一款专为稳定扩散&#xff08;Stable Diffusion&#xff09;设计、基于节点的高效用户界面&#xff0c;因其高度的可定制性&#xff0c;正逐渐成为广大用户的新宠。本文教你如何在 Windows 和 Mac 上安装 ComfyUI&#xff0c;并提供一些快速上手的小贴士。 1 ComfyU…
阅读更多...
【mysql进阶】4-7. 通用表空间

【mysql进阶】4-7. 通用表空间

通⽤表空间 - General Tablespace 1 通⽤表空间的作⽤和特性&#xff1f; ✅ 解答问题 通⽤表空间是使⽤ CREATE tablespace 语法创建的共享InnoDB表空间 通⽤表空间能够存储多个表的数据&#xff0c;与系统表空间类似也是共享表空间&#xff1b; 服务器运⾏时会把表空间元数…
阅读更多...
python爬虫——Selenium的基本使用

python爬虫——Selenium的基本使用

目录 一、Selenium的介绍 二、环境准备 1.安装Selenium 2.安装WebDriver 三、元素定位 1.常用定位元素的方法 2. 通过指定方式定位元素 四、窗口操作 1.最大化浏览器窗口 2.设置浏览器窗口大小 3.切换窗口或标签页 切换回主窗口 4. 关闭窗口 关闭当前窗口 关闭所…
阅读更多...
博客搭建之路：hexo增加搜索功能

博客搭建之路：hexo增加搜索功能

文章目录 hexo增加搜索功能本地搜索弊端algolia搜索 hexo增加搜索功能 hexo版本5.0.2 npm版本6.14.7 next版本7.8.0 作为一个博客&#xff0c;没有搜索功能&#xff0c;如何在大批文章中找到自己想要的&#xff0c;那在hexo中如何增加搜索功能呢&#xff1f; search:path: sea…
阅读更多...
用接地气的例子趣谈 WWDC 24 全新的 Swift Testing 入门（一）

用接地气的例子趣谈 WWDC 24 全新的 Swift Testing 入门（一）

概述 从 WWDC 24 开始&#xff0c;苹果推出了全新的测试机制&#xff1a;Swift Testing。利用它我们可以大幅度简化之前“老态龙钟”的 XCTest 编码范式&#xff0c;并且使得单元测试更加灵动自由&#xff0c;更符合 Swift 语言的优雅品味。 在这里我们会和大家一起初涉并领略…
阅读更多...
2.Linux按键驱动-创建字符设备，通过应用程序读取按键值

2.Linux按键驱动-创建字符设备，通过应用程序读取按键值

1.在上一个博客的基础上&#xff0c;添加一个字符设备 https://blog.csdn.net/weixin_40933496/article/details/143253515?spm1001.2014.3001.55012.在probe函数中注册字符设备 register_chrdev(包含对应的file_operations结构体) class_create device_create3.在中断处理函…
阅读更多...
基于大模型的招聘智能体：从创意到MVP

基于大模型的招聘智能体：从创意到MVP

正在考虑下一个 SaaS 创意&#xff1f;以下是我在短短几个小时内从创意到 MVP 的过程。 以下是我将在这篇文章中介绍的内容概述&#xff1a; 为什么这个想法让我产生共鸣我是如何开始构建它的我现在的处境以及我是否会真正推出 获得 SaaS 创意并构建它并不容易。就是这样。 …
阅读更多...
opencv学习笔记（1）：基础知识

opencv学习笔记（1）：基础知识

1.像素&#xff1a; 像素&#xff1a;数字图像的最小单位。数字图像由像素组成&#xff0c;像素由一系列代码表示的原色组合而成。 2.颜色空间&#xff1a; 颜色空间&#xff1a;也称彩色模型&#xff08;又称彩色空间或彩色系统&#xff09;。 &#xff08;说白了就是用来描述…
阅读更多...
FCN深度学习语义分割开山之作——学习笔记

FCN深度学习语义分割开山之作——学习笔记

《Fully Convolutional Networks for Semantic Segmentation》提出了首个端到端的针对像素级预测的全卷积网络&#xff08;FCN&#xff09;&#xff0c;可直接处理任意大小的输入图像并输出相应大小的预测结果&#xff0c;超过了现有技术水平。 一、提出背景 传统的语义分割方…
阅读更多...
[计算机网络]第一周

[计算机网络]第一周

TCP/IP 与OSI TCP/IP TCP/IP 四层模型是一个分层网络通信模型&#xff0c;它将网络通信过程分为四个层次&#xff0c;这四层分别是&#xff1a;网络接口层、互联网层、传输层和应用层。 网络接口层负责在计算机和网络硬件之间传输数据&#xff0c;负责在物理网络上发送和接收…
阅读更多...
2024“源鲁杯“高校网络安全技能大赛-Misc-WP

2024“源鲁杯“高校网络安全技能大赛-Misc-WP

Round 1 hide_png 题目给了一张图片&#xff0c;flag就在图片上&#xff0c;不过不太明显&#xff0c;写个python脚本处理一下 from PIL import Image ​ # 打开图像并转换为RGB模式 img Image.open("./attachments.png").convert("RGB") ​ # 获取图像…
阅读更多...
241026-RHEL如何以root身份卸载Docker

241026-RHEL如何以root身份卸载Docker

在 RHEL 8.8 中&#xff0c;以 root 身份卸载 Docker 可以通过以下步骤完成&#xff1a; 停止 Docker 服务&#xff08;如果已启动&#xff09;&#xff1a; sudo systemctl stop docker删除 Docker 包&#xff1a; 运行以下命令卸载 Docker 引擎及其依赖包&#xff08;docker-…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023