9.(高级)CSS形状之:切角效果

一、单切角

 9.(高级)CSS形状之:切角效果_第1张图片

方法:

background: #58a;

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

 9.(高级)CSS形状之:切角效果_第2张图片

方法:

background: #58a;

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

 9.(高级)CSS形状之:切角效果_第3张图片

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

 9.(高级)CSS形状之:切角效果_第4张图片

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

 9.(高级)CSS形状之:切角效果_第5张图片

三、四切角

 9.(高级)CSS形状之:切角效果_第6张图片

方法:

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;

四、四切弧角

 9.(高级)CSS形状之:切角效果_第7张图片

方法:

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揭秘》

 

你可能感兴趣的:(9.(高级)CSS形状之:切角效果)