《css揭秘》笔记(九),切角效果
发布日期:2022-02-15 02:36:20
浏览次数:14
分类:技术文章
本文共 2319 字,大约阅读时间需要 7 分钟。
切角效果
切角效果
普通切角
假设我们只需要一个角被切掉的效果,以右下角为例。渐变可以接受一个角度(45deg)作为方向,而且色标的位置信息可以是绝对的长度值。因而我们可以用一个线性渐变就能完成右下角被切掉的效果,只需要把一个透明色标放在切角处。
.box1{ width:200px; height: 100px; background: linear-gradient(45deg, transparent 15px, #58a 0);}
现在我们想要两个角被切掉的效果,以底部的两个角为例,只用一层渐变是不够的,还需要再加一层。
.box2{ margin: 20px; width: 200px; height: 100px; background: linear-gradient(-45deg, transparent 15px, #58a 0) right, linear-gradient(45deg, transparent 15px, #655 0) left;}
然而这两层渐变会相互覆盖,最终得到的效果是:
所以我们用background-size
使两层渐变分开。
.box3{ margin: 20px; width: 200px; height: 100px; background: linear-gradient(-45deg, transparent 15px, #58a 0) right, linear-gradient(45deg, transparent 15px, #655 0) left; background-size: 50% 100%;}
然后这依然不是想要的效果,原因在于background
默认是repeat
的,需要把background-repeat
设置成no-repeat
。
.box4{ margin: 20px; width: 200px; height: 100px; background: linear-gradient(-45deg, transparent 15px, #58a 0) right, linear-gradient(45deg, transparent 15px, #655 0) left; background-size: 50% 100%; background-repeat: no-repeat;}
如果我们想要四个角都被切掉的效果,就可以用四层渐变:
.box5{ margin: 20px; width: 200px; height: 100px; background: linear-gradient(-45deg, transparent 15px, #58a 0) bottom right, linear-gradient(45deg, transparent 15px, #58a 0) bottom left, linear-gradient(-135deg, transparent 15px, #58a 0) top right, linear-gradient(135deg, transparent 15px, #58a 0) top left; background-size: 50% 50%; background-repeat: no-repeat;}
弧形切角
上述渐变还有一个变种,可以用来创建弧形切角(也叫“内凹圆角”)。我们使用径向渐变来达到这种效果:
.box6{ width: 200px; height: 100px; background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left, radial-gradient(circle at top right, transparent 15px, #58a 0) top right, radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left; background-size:50% 50%; background-repeat: no-repeat;}
裁切路径方案
可以使用clip-path
将一个元素切出20px大小(以水平方向度量)的斜面切角:
.box7{ width: 200px; height: 100px; background-color: #58a; clip-path: polygon( 20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px );}
这个方案的不足在于,它会连容器中的文字一并裁切掉,如上图所示。
本篇文章是《css揭秘》一书的笔记,如果侵犯到了原作者的权益,请联系我删除。
转载地址:https://blog.csdn.net/PeZXO/article/details/106218077 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
留言是一种美德,欢迎回访!
[***.207.175.100]2024年04月15日 05时31分53秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
【Leetcode刷题篇】leetcode99 恢复二叉搜索树
2019-04-26
【Leetcode刷题篇】leetcode451根据字符出现频率排序
2019-04-26
【Leetcode刷题篇】leetcode703 数据流中的第k大元素
2019-04-26
【Leetcode刷题篇】leetcode378 有序矩阵中第K小的元素
2019-04-26
【Leetcode刷题篇】前K个高频元素
2019-04-26
【Leetcode刷题篇】leetcode373 查找和最小的K对数字
2019-04-26
【Leetcode刷题篇】leetcode367 有效的完全平方数
2019-04-26
【Leetcode刷题篇】剑指offer-数值的整数次方
2019-04-26
【Leetcode刷题篇】面试题01.06 字符串压缩
2019-04-26
【Leetcode刷题篇】leetcode443 压缩字符串
2019-04-26
【面试篇】数据结构-线性表
2019-04-26
【面试篇】数据结构-树形结构
2019-04-26
【面试篇】数据结构-哈希表
2019-04-26
【Leetcode刷题篇】leetcode88 合并两个有序数组
2019-04-26
【Leetcode刷题篇】剑指offer51 数组中的逆序对
2019-04-26
【Leetcode刷题篇】剑指offer55-平衡二叉树
2019-04-26
【Leetcode刷题篇】leetcode98 判断一棵树是否为二叉搜索树
2019-04-26
Java中arraylist和数组的相互转换
2019-04-26
【Leetcode刷题篇 】leetcode147 对链表进行插入排序
2019-04-26
【Leetcode刷题篇】leetcode148 排序链表
2019-04-26