1. 一个切角
思路：如果我们要得到有一个切角的元素，我们只需要使用一个径向渐变就可以达到这个目标，这个渐变需要把一个透明色标放在切角处，然后再相同的位置设置另一个色标，并且把它的颜色设置成我们想要的背景色。
html
css
.corner{
width: 200px;
height: 150px;
background: #58a;
background: linear-gradient(-45deg,transparent 20px,#58a 0);
}
效果图
2. 两个切角
由上面的例子，我们很快想到这么写
css
.corner{
width: 200px;
height: 150px;
background: #58a;
background: linear-gradient(-45deg,transparent 20px,#58a 0),
linear-gradient(45deg,transparent 20px,#58a 0);
}
效果图
我们发现并没有达到我们想要的效果，这是因为左下角和右下角的两个渐变把对方覆盖了，所以只看到背景色。
于是我们想到了background-size，没错，如果把background-size的值设置为一半,是不是就可以了呢？事实证明还是不对，原因在于我们忘记把background-repeat关掉了，因而每层渐变图案各自平铺了两次，这导致背景仍然是相互覆盖的，只不过这次是因为背景平铺，所以修改后的代码是这样的：
css
.corner{
width: 200px;
height: 150px;
background: #58a;
background: linear-gradient(-45deg,transparent 20px,#58a 0) right,
linear-gradient(45deg,transparent 20px,#58a 0) left;
background-size: 50% 100%;
background-repeat: no-repeat;
}
效果图：
3. 四个切角
css
.corner{
width: 200px;
height: 150px;
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% 51%;
background-repeat: no-repeat;
}
效果图
这里需要注意的是：background-size: 50% 51%;如果高度设置为50%,中间会出现一条空隙。
4. 弧形切角
css
.corner{
width: 200px;
height: 150px;
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% 51%;
background-repeat: no-repeat;
}
效果图
5. 使用border-imgage+svg实现
6. 使用clip-path实现
css
.corner{
width: 330px;
height: 250px;
background: url('ssd.jpg');
background-size: cover;
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);
}
效果图
这种方法的好处是：我们可以使用任意类型的文本，但是有一个很大的缺点是：当内边距不足时，它会裁切掉文本，因为它只能对元素进行统一的裁切，并不能区分元素的各个部分。
.corner{
width: 330px;
height: 250px;
background: url('ssd.jpg');
background-size: cover;
clip-path: polygon(20px ,calc(100% - 20px) ,
100% 20px,100% calc(100% - 20px),
calc(100% - 20px) 100%,20px 100%,
calc(100% - 20px), 20px);
}
css 折角效果/切角效果
首先我们先创建一个图案为100像素的斜面切角的图案 html
CSS3样式linear-gradient的使用(切角效果)
linear-gradient linear-gradient是CSS3中新增的样式,主要用于颜色的渐变效果.MDN地址 linear-gradient在不同内核下使用方式不同,详细内容可参考w3cp ...
css切角效果，折角效果
html
用css实现网站切角效果 使用css3属性:渐变
都是大量的练习,老师练习乒乓球花了大量时间,十万次一个动作的重复,高中班主任说过,世上没有天才,只是重复的次数多了,自然被认作了天才,小小班的学生之所以厉害是因为他们重复一个知识点次数多,所以没有一 ...
CSS奇思妙想图形(心形、气泡三角形、切角、梯形、饼图等)
今天看到一篇不错文章,在原来CSS3图形创建基础上扩展了很多. 这里记录总结下 心形 原理:利用 圆形 和 正方形实现 HTML:
242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
