切角

.linear{ width: 200px; height: 100px; background: #58a; background: linear-gradient(135deg,transparent 15px,#58a 0) top left, linear-gradient(-135deg,transparent 15px,#58a 0) top right, linear-gradient(-45deg,transparent 15px,#58a 0) bottom right, linear-gradient(45deg,transparent 15px,#58a 0) bottom left; background-size: 50% 50%;background-repeat: no-repeat; }

弧形切角的制作

.linear{ width: 200px; height: 100px; background: #58a; background: 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; background-size: 50% 50%;background-repeat: no-repeat; }

 

转载于:https://www.cnblogs.com/7-Eleven/p/5638883.html

相关资源：JAVA上百实例源码以及开源项目