9.（高级）CSS形状之：切角效果

最新推荐文章于 2025-06-23 17:23:59 发布

majun0007

最新推荐文章于 2025-06-23 17:23:59 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：（CSS高级篇）CSS看书总结及特效文章标签： CSS CSS3 html

本文链接：https://blog.youkuaiyun.com/majun0007/article/details/55098922

（CSS高级篇）CSS看书总结及特效专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何使用CSS实现单切角、双切角、四切角以及四切弧角的效果。通过线性渐变和径向渐变的组合，调整透明度和颜色，创造出各种形状的切角效果，适用于网页设计中的不同需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、单切角

方法：

background: #58a;

background: linear-gradient(-45deg,transparent 15px,#58a 0);
二、双切角

方法：

background: #58a;

/*right设置切角放置在右下角*/
background: linear-gradient(-45deg,transparent 15px,#58a 0) right,
linear-gradient(45deg,transparent 15px,#655 0) left;

/*两个角重叠在一起*/
background-size: 50% 100%;

/*平铺了2次*/
background-repeat: no-repeat;

三、四切角

方法：

background: #58a;
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 left,
linear-gradient(-135deg,transparent 15px,#58a 0) top right;
background-size: 50% 50%;
background-repeat: no-repeat;

四、四切弧角

方法：

background: #58a;
background: radial-gradient(circle at bottom right ,transparent 15px,#58a 0) bottom right,
radial-gradient(circle at bottom left ,transparent 15px,#58a 0) bottom left,
radial-gradient(circle at top left ,transparent 15px,#58a 0) top left,
radial-gradient(circle at top right ,transparent 15px,#58a 0) top right;
background-size: 50% 50%;
background-repeat: no-repeat;

声明：以上方法参考《CSS揭秘》