一个切角
<div class="main"> <div class="box">切角效果</div> </div> <style> .box{
width: 200px; height: 120px; padding: 10px; color: white; background: #58a; background: linear-gradient(-45deg, transparent 15px, #58a 0); } </style> 讯享网
两个切角
讯享网 <div class="main"> <div class="box">两个切角效果</div> </div> <style> .box {
width: 200px; height: 120px; padding: 10px; color: white; background: #58a; background: linear-gradient(-45deg, transparent 15px, #58a 0) right, linear-gradient(45deg, transparent 15px, #58a 0) left; background-size: 50% 100%; background-repeat: no-repeat; } </style>
四个切角
<div class="main"> <div class="box">四个切角效果</div> </div> <style> .box {
width: 200px; height: 120px; padding: 10px; color: white; 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; } </style> 弧形切角
讯享网 <div class="main"> <div class="box">弧形切角</div> </div> <style> .box {
width: 200px; height: 120px; padding: 10px; color: white; 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; } </style>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/19993.html