您现在的位置是：网站首页> 编程资料编程资料
CSS3实现缺角矩形，折角矩形以及缺角边框一文教你玩转CSS border(边框)CSS 奇思妙想边框动画效果的实现CSS3 按钮边框动画的实现CSS3 实现发光边框特效两款纯CSS3鼠标经过按钮边框动画特效一篇文章带你学习CSS3图片边框css3多种边框悬停按钮填色动画特效css 透明边框background-clip妙用CSS边框长度控制功能的实现CSS实现半透明边框与多重边框的场景分析
2021-09-03
833人已围观
简介 这篇文章主要介绍了CSS3实现缺角矩形，折角矩形以及缺角边框，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前言
前几天偶然看到缺角矩形这个功能，脑袋中第一想法是，搞个绝对定位的伪元素，哪里需要挡哪里，或者找UI小哥聊聊天，忽然灵光一闪，想起之前翻过的《CSS揭秘》一书，记得有这个篇章，遂有了此文。
话不多说，放个效果图先
缺角
1. 伪元素实现
.bg{ width: 120px; height: 80px; background: #58a; } /* 下文元素都使用了此样式 */ .cover{ position: relative; } .cover::before { content: ''; width: 0; height: 0; position: absolute; right: 0; bottom: 0; border: 5px solid #fff; border-top-color: transparent; border-left-color: transparent; } .cover::after{ content: ''; width: 0; height: 0; position: absolute; left: 0; top: 0; border: 5px solid #fff; border-bottom-color: transparent; border-right-color: transparent; }用伪元素画一个和背景色相同的三角形，然后绝对定位到需要遮挡的地方，如下图，但是这个最多只能弄两个缺角
2. 渐变实现
CSS语法
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
| 值 | 描述 |
|---|---|
| direction | 用角度值指定渐变的方向（或角度）。 |
| color-stop1, color-stop2,... | 用于指定渐变的起止颜色。 |
并且渐变可以接受一个角度（比如45deg）作为方向，而且色标的位置信息也可以是绝对的长度值。
45deg: 表示从左下到右上的方向
-45deg: 表示从右下到左上的方向
......
.missAngle{ background: linear-gradient(-45deg, transparent 10px, #58a 0); }
实现多个角
.rect{ background: linear-gradient(135deg, transparent 10px, #58a 0) top left, linear-gradient(-135deg, transparent 10px, #58a 0) top right, linear-gradient(-45deg, transparent 10px, #58a 0) bottom right, linear-gradient(45deg, transparent 10px, #58a 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; /* Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。 */ }
这个实际上使用四个图形拼接出来的，如下图
background-size: 50% 50%; 表示每个小图形宽50%，高50%
弧形切角
.cricle{ background: radial-gradient(circle at top left, transparent 10px, #58a 0) top left, radial-gradient(circle at top right, transparent 10px, #58a 0) top right, radial-gradient(circle at bottom right, transparent 10px, #58a 0) bottom right, radial-gradient(circle at bottom left, transparent 10px, #58a 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; }
最后，Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。
这里有一个问题，拉动浏览器，当宽度被挤压，小于定义宽度时，可能会出现白色的缝隙，这里需要注意一下下，如下图
当背景图是一张图片的时候，这时实现缺角的话渐变就不好使了，接下来请出clip-path
clip-path实现
clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。
clip-path: polygon(x y, x1 y1, x2 y2, x3 y3, ...)
x y, x1 y1, x2 y2, x3 y3, ... 这些表示坐标轴中的点，根据所有的点绘制一个封闭的图形
.rect-clip{ background-image: url(./im.jpg); background-size: 100% 100%; background-repeat: no-repeat; clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px) }效果图：
总宽度为120px calc(100% - 15px) => 105px 100% => 120px
将对应的点连接起来就构成了一个缺角矩形
clip-path的功能还是蛮强大的，绘制各种各样的形状，菱形，五角星啊等等，比如下图
.clip5{ margin-left: 30px; /*clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);*/ clip-path: inset(0 round 0 25%); /* 可以简写 */ /* inset( round ) */ /* inset使用四个值（对应“上 右 下 左”的顺序）来设置圆角半径。 */ } 
用来做动画
.line-box{ width: 100px; height: 60px; } .line{ width: 100%; height: 100%; background: #26b91a; } .line1{ -webkit-clip-path: polygon(80% 0, 40% 40%, 80% 80%); clip-path: polygon(80% 0, 40% 40%, 80% 80%); animation: a 2s 1s infinite; } .line2{ clip-path: polygon(10% 10%, 60% 40%, 50% 90%); animation: b 2s 1s infinite; } .line3{ clip-path: polygon(20% 20%, 30% 20%, 30% 50%, 20% 50%); animation: c 2s 1s infinite; } @keyframes a{ 90% { background: #1f351f; } 100% { clip-path: polygon(50% 40%, 25% 100%, 75% 100%); } } @keyframes b{ 90% { background: #1f351f; } 100% { clip-path: polygon(50% 0, 0% 100%, 100% 100%); } } @keyframes c{ 90% { background: #1f351f; } 100% { clip-path: polygon(40% 0, 60% 0, 60% 100%, 40% 100%); } }
这里只列举了clip-path的部分功能，更多形状点这里 ，一个用来生成各种形状（包括随意拖拉自定义）并且可以直接生成代码的网站。
虽然这个能绘制各式形状，但是兼容性却不怎么好，谷歌版本79，火狐71测试正常，IE不可，具体兼容性请看 这里
如果项目需要考虑兼容性问题，也可以放一张图片当作背景图，图片压缩一下，或者只有最多两个缺角使用伪元素，根据项目实际情况选择合适自己的方案
缺角边框
.out-rect { margin-top: 30px; display: flex; align-items: center; justify-content: center; width: 200px; height: 80px; padding: 5px; background: linear-gradient(-45deg, transparent 10px, #58a 0) top right; background-size: 100% 100%; background-repeat: no-repeat; } .in-rect{ width: 100%; height: 100%; background: linear-gradient(-45deg, transparent 8px, #fff 0) top right; background-size: 100% 100%; background-repeat: no-repeat; }
效果如下：
两个缺角矩形叠加的效果，内部矩形宽高跟随父div大小，只要保持垂直居中就好，padding的值为最终呈现的边框的宽度
折角
还是使用渐变linear-gradient实现，在缺角矩形的基础上多了一个折角
效果图如下：
首先实现第一种
.bg{ width: 120px; height: 80px; background: #58a; } .foldingAngle{ background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.4) 0) no-repeat 100% 0 / 1.4em 1.4em, linear-gradient(-135deg, transparent 1em, #58a 0); }效果图
linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.4) 0) no-repeat 100% 0 / 1.4em 1.4em 朝左下方向，透明黑色各一半渐变绘制，位置: 100% 0 size: 1.4em 1.4em
如下：
size 为1.4em 1.4em 这个三角形是一个45°的直角三角形，直角边长1.4em, 斜边长为 1.4/√2 ≈ 1
所以绘制一个缺角为1em的矩形
linear-gradient(-135deg, transparent 1em, #58a 0) -135deg 朝左下方向绘制一个缺角矩形
两次渐变重叠，所以效果图为：
一定要先画小三角，再画缺角矩形，否则矩形会盖住小三角
右下角折角
.foldingAngle2{ background: linear-gradient(to left top, transparent 50%, rgba(0, 0, 0, 0.4) 0) no-repeat 100% 100% / 1.4em 1.4em, linear-gradient(-45deg, transparent 1em, #58a 0); }
这样子看起来有点儿不真实，并且现实中折角不一定都是45°
下面画一个30°的折角，先画一个缺角矩形
.foldingAngle2{ margin-top: 30px; position: relative; border-radius: .3em; background: linear-gradient(-150deg, transparent 1em, #58a 0); }
接下来画折角
根据上图红色数字，折角宽2/√3 ≈ 1.15em 长：2em 画出折角
.foldingAngle2::before{ content: ''; position: absolute; right: 0; top: 0; width: 1.15em; height: 2em; background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3)) 100% 0 no-repeat; border-bottom-left-radius: inherit; }
旋转一下
.foldingAngle2::before{ content: ''; position: absolute; right: 0; top: 0; width: 1.15em; height: 2em; background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3)) 100% 0 no-repeat; transform: rotate(-30deg); transform-origin: bottom right; /* 让三角形的右下角成为旋转的中心 */ }
上移一下，偏移量为2-1.15=0.85em，再加点阴影
.foldingAngle2::before{ content: ''; position: absolute; right: 0; top: 0; width: 1.15em; height: 2em; background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3)) 100% 0 no-repeat; transform: translateY(-0.85em) rotate(-30deg); transform-origin: bottom right; box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15); border-bottom-left-radius: inherit; /* 左下角继承border-radius */ }
这样子就是最终的效果
改变角度和长宽计算有些麻烦，可以使用预处理器@mixin,这里只说一下过程，不多叙述
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
相关内容
- CSS巧妙实现自适应分隔线的N种方法css实现文章分割线样式的多种方法总结
- 详解flex布局中flex-grow与flex-shrink的计算方式flex-grow、flex-shrink、flex-basis和九宫格布局理解详解关于flex-shrink如何计算的冷知识CSS3 Flexbox中flex-shrink属性的用法示例介绍
- CSS样式 解决文字过长显示省略号问题css多行文本溢出时出现省略号的示例纯CSS定制文本省略的方法大全css3实现渐变、阴影、超出指定文本省略号显示等一些效果实例CSS实现标题文字过长部分显示省略号的方法
- 使用css画一个文件上传图案css input[type=file] 样式美化(input上传文件样式 )基于jQuery+CSS3实现带动画效果文件上传插件特效源码HTML5+CSS3实现无插件拖拽上传图片（支持预览与批量）文件上传input file简便美化方案(css)利用label标签和CSS美化文件上传表单(不兼容IE6)css 表单上传文件的“浏览”按钮修改
- CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked利用纯CSS自定义Checkbox和Radio的样式示例代码一款纯css3实现简单的checkbox复选框和radio单选框纯css3实现效果超级炫的checkbox复选框和radio单选框CSS3实例分享--超炫checkbox复选框和radio单选框css3和jquery实现自定义checkbox和radiobox组件
- css3实现背景动态渐变效果通过css3背景控制属性+使用颜色过渡实现渐变效果css3 给背景设置渐变色的方法用CSS3实现背景渐变的方法CSS3实现渐变背景兼容问题
- 不可思议的CSS导航栏下划线跟随效果CSS 带搜索导航栏的示例代码html+css+js实现导航栏滚动渐变效果css锚点定位被顶部固定导航栏遮住的解决方案html+css 实现简易导航栏功能CSS导航条菜单之带小三角形的实现代码css实现导航切换的实例代码CSS设置列表样式和创建导航菜单实现代码CSS中的导航栏和下拉菜单的实现纯CSS + 媒体查询实现网页导航效果CSS3 二级导航菜单的制作的示例
- 2分钟教你实现环形/扇形菜单(基础版)CSS3 分类菜单效果CSS实现菜单按钮动画CSS导航条菜单之带小三角形的实现代码CSS多级菜单的实现代码css利用transform skewX制作平行四边形导航菜单CSS设置列表样式和创建导航菜单实现代码CSS中的导航栏和下拉菜单的实现HTML+CSS实现下拉菜单的实现纯CSS实现的大型下拉菜单的示例代码纯CSS实现可折叠树状菜单
- css3一个简易的 LED 数字时钟实现方法纯CSS3实现运行时钟的示例代码css3 利用transform打造走动的2D时钟利用CSS3 动画 绘画 圆形动态时钟CSS实现漂亮的时钟动画效果的实例代码
- 通过CSS边框实现三角形和箭头的实例代码CSS中三角形的绘制与巧妙应用实例详解纯CSS3+DIV实现小三角形边框效果的示例代码CSS3 SVG实现三角形场景图中的日落月出，飞鸟归林动画效果源码用CSS画一个带阴影的三角形的示例代码老生常谈 使用 CSS 实现三角形的技巧(多种方法)
