在css中实现平角、弧形切角的样式方法

来源：懂视网责编：小采时间：2020-11-27 18:50:13

在css中实现平角、弧形切角的样式方法

在css中实现平角、弧形切角的样式方法:在web设计中，有时候会碰到一些切角的样式需求，实现方法有很多种，用图片也好，结点叠加覆盖也好，都可以实现切角的样式，这里笔者直接用css来实现切角的样式。切单一角： background: #58a;background: linear-gradient(-45deg, tra

推荐度：

点击下载本文 文档为doc格式

导读在css中实现平角、弧形切角的样式方法:在web设计中，有时候会碰到一些切角的样式需求，实现方法有很多种，用图片也好，结点叠加覆盖也好，都可以实现切角的样式，这里笔者直接用css来实现切角的样式。切单一角： background: #58a;background: linear-gradient(-45deg, tra

在web设计中，有时候会碰到一些切角的样式需求，实现方法有很多种，用图片也好，结点叠加覆盖也好，都可以实现切角的样式，这里笔者直接用css来实现切角的样式。
切单一角：
这里写图片描述

background: #58a;background: linear-gradient(-45deg, transparent 15px, #58a 0);

采用如上所示css就可以实现样式，修改角度就可以实现任一角度的切角效果。
切两个角：
这里写图片描述

background: #58a;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;

上述样式中，笔者用了两种颜色以方便读者理解其中的含义。
两个切角实现了，四个切角就很容易了。
四个切角实现：
这里写图片描述

background: #58a;background: linear-gradient(135deg, transparent 15px, #58a 0) top left, 
 linear-gradient(-135deg, transparent 15px, #58a 0) top right, 
 linear-gradient(-45deg, transparent 15px, #58a 0) bottom right, 
 linear-gradient(45deg, transparent 15px, #58a 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat;

上述样式实现了四个平角切角的样式，那么我们进一步构思，想要实现弧形切角该怎么做呢？
弧形切角：
这里写图片描述
可以看到，图案类似传统的剃须刀片，实现这种样式并不难，我们用径向渐变来替代线性渐变就可以。

background: #58a;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;

想要实现切角的效果，还有不少其他的方案，比如内联svg和border-image方案，裁切路径方案等，感兴趣的读者可以自己探索尝试。

background: #58a;background: linear-gradient(-45deg, transparent 15px, #58a 0);

采用如上所示css就可以实现样式，修改角度就可以实现任一角度的切角效果。
切两个角：
这里写图片描述

background: #58a;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;

上述样式中，笔者用了两种颜色以方便读者理解其中的含义。
两个切角实现了，四个切角就很容易了。
四个切角实现：
这里写图片描述

background: #58a;background: linear-gradient(135deg, transparent 15px, #58a 0) top left, 
 linear-gradient(-135deg, transparent 15px, #58a 0) top right, 
 linear-gradient(-45deg, transparent 15px, #58a 0) bottom right, 
 linear-gradient(45deg, transparent 15px, #58a 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat;

background: #58a;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;

想要实现切角的效果，还有不少其他的方案，比如内联svg和border-image方案，裁切路径方案等，感兴趣的读者可以自己探索尝试。

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

在css中实现平角、弧形切角的样式方法

推荐度：

点击下载本文 文档为doc格式

标签：平角弧形 css

热门焦点

在css中实现平角、弧形切角的样式方法

在css中实现平角、弧形切角的样式方法

在css中实现平角、弧形切角的样式方法

最新推荐

猜你喜欢

热门推荐