.box{
width: 200px;
height: 100px;
background: orangered;
text-align: center;
background: linear-gradient(-45deg,transparent 15px,orangered 0);
从右下到左上开始的透明色渐变到15px位置开始橙色渐变
color: white;
}
1 矩形切角
.box{
width: 200px;
height: 100px;
background: orangered;
text-align: center;
background: linear-gradient(-135deg,transparent 15px,orangered 0)
top right,
linear-gradient(135deg, transparent 20px, orangered 0)
top left,
linear-gradient(-45deg,transparent 15px,orangered 0)
bottom right,
linear-gradient(45deg, transparent 20px, orangered 0)
bottom left;
color: white;
background-size: 50% 50%;等分成四份为每个角做出切角效果
background-repeat: no-repeat;
}
四层渐变
.box{
width: 200px;
height: 100px;
background: #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 );
}
八个坐标定义八个角 (x轴,y轴)
2 弧形切角
径向渐变
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;