使用CSS实现几何图形切角
导读：实现一个角被切掉的效果，可以使用渐变，渐变接受一个角度作为方向，并且允许文字溢出并超出切角区域（因为它只是背景图案），具体实现如下： div { background: #58a; background: linear-gradient(-...
实现一个角被切掉的效果，可以使用渐变，渐变接受一个角度作为方向，并且允许文字溢出并超出切角区域（因为它只是背景图案），具体实现如下：
div {
background: #58a;
background: linear-gradient(-45deg, transparent 15px, #58a 0);
}
效果如下：
用 CSS 绘制各种几何图形实现两个切角的办法：
div {
width: 200px;
height: 100px;
background: #58a;
background: linear-gradient(-45deg, transparent 15px, #58a 0)
right, linear-gradient(45deg, transparent 15px, #65a
0) left;
background-size: 50% 100%;
background-repeat: no-repeat;
}
效果如下：
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 使用CSS实现几何图形切角
本文地址： https://pptw.com/jishu/667136.html