《css揭秘》笔记(九),切角效果
发布日期:2022-02-15 02:36:20 浏览次数:2 分类:技术文章

本文共 2238 字,大约阅读时间需要 7 分钟。

切角效果

切角效果

普通切角

假设我们只需要一个角被切掉的效果,以右下角为例。渐变可以接受一个角度(45deg)作为方向,而且色标的位置信息可以是绝对的长度值。因而我们可以用一个线性渐变就能完成右下角被切掉的效果,只需要把一个透明色标放在切角处。

.box1{

 width:200px;  height: 100px;  background:
 linear-gradient(45deg, transparent 15px, #58a 0);}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fsu9jF1T-1589878078403)(3图形/img/44.png)]

现在我们想要两个角被切掉的效果,以底部的两个角为例,只用一层渐变是不够的,还需要再加一层。

.box2{

 margin: 20px;  width: 200px;  height: 100px;  background:
 linear-gradient(-45deg, transparent 15px, #58a 0) right,
linear-gradient(45deg, transparent 15px, #655 0) left;}

然而这两层渐变会相互覆盖,最终得到的效果是:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2W1sZ4xd-1589878078407)(3图形/img/45.png)]

所以我们用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%;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OmT9Yxty-1589878078410)(3图形/img/46.png)]

然后这依然不是想要的效果,原因在于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;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rzoa0hPU-1589878078414)(3图形/img/47.png)]

如果我们想要四个角都被切掉的效果,就可以用四层渐变:

.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;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g8daYs5W-1589878078419)(3图形/img/48.png)]

弧形切角

上述渐变还有一个变种,可以用来创建弧形切角(也叫“内凹圆角”)。我们使用径向渐变来达到这种效果:

.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;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vEd9MHPE-1589878078421)(3图形/img/49.png)]

裁切路径方案

可以使用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
);}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1WIYFxkO-1589878078423)(3图形/img/50.png)]

这个方案的不足在于,它会连容器中的文字一并裁切掉,如上图所示。

本篇文章是《css揭秘》一书的笔记,如果侵犯到了原作者的权益,请联系我删除。

转载地址:https://blog.csdn.net/PeZXO/article/details/106218077 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:《CSS揭秘》笔记(十), 梯形效果
下一篇:《css揭秘》笔记(十一), 简单饼图效果

发表评论

最新留言

路过按个爪印,很不错,赞一个!
[***.67.29.152]2022年07月23日 02时21分53秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章