<template> <div class="container"> <div class="clip-all-angle"> 4个角全部剪切 </div> <div class="clip-two-angle"> 切底部两个角 </div> <div class="clip-two-top-angle"> 切顶部两个角 </div> <div class="clip-remove-top-left-angle"> 切除了左上外3个角 </div> <div class="clip-remove-top-right-angle"> 切除了右上外3个角 </div> <div class="clip-remove-bottom-left-angle"> 切除了左下外3个角 </div> <div class="clip-remove-bottom-right-angle"> 切除了右下外3个角 </div> <div class="clip-top-left"> 左上角切角 </div> <div class="clip-top-right"> 右上角切角 </div> <div class="clip-bottom-right"> 右下角切角 </div> <div class="clip-bottom-left"> 左下角切角 </div> <div class="clip-top-left-to-bottom-right"> 左上-右下角对切角 </div> <div class="clip-top-right-to-bottom-left"> 右上-左下角对切角 </div> <div class="clip-two-angle2"> 切底部两个角内部加背景 </div> </div> </template> <script setup lang="ts"></script> <style style="scss" scoped> .container { width: 100vw; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; padding: 10px; div { margin-right: 20px; } } .clip-all-angle { width: 250px; height: 100px; margin-bottom: 10px; text-align: center; line-height: 100px; clip-path: polygon( 15px 0px, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px ); background: linear-gradient(-45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom right, linear-gradient(45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom left, linear-gradient(135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top left, linear-gradient(-135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top right; border: 1px solid #a9c1d2; } .clip-two-angle { width: 250px; height: 100px; margin-bottom: 10px; text-align: center; line-height: 100px; border: 1px solid #a9c1d2; clip-path: polygon( 15px 0px, 100% 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 0 ); background: linear-gradient(-45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom right, linear-gradient(45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom left; } .clip-two-top-angle { width: 250px; height: 100px; margin-bottom: 10px; text-align: center; line-height: 100px; border: 1px solid #a9c1d2; clip-path: polygon( 15px 0px, calc(100% - 15px) 0, 100% 15px, 100% 100%, calc(100% - 15px) 100%, 15px 100%, 0 100%, 0 15px ); background: linear-gradient(135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top left, linear-gradient(-135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top right; } .clip-remove-top-left-angle { width: 250px; height: 100px; margin-bottom: 10px; text-align: center; line-height: 100px; border: 1px solid #a9c1d2; clip-path: polygon( 0 0px, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px ); background: linear-gradient(-45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom right, linear-gradient(45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom left, linear-gradient(-135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top right; } .clip-remove-top-right-angle { width: 250px; height: 100px; margin-bottom: 10px; text-align: center; line-height: 100px; border: 1px solid #a9c1d2; clip-path: polygon( 15px 0px, 100% 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px ); background: linear-gradient(-45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom right, linear-gradient(45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom left, linear-gradient(135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top left; } .clip-remove-bottom-left-angle { width: 250px; height: 100px; margin-bottom: 10px; text-align: center; line-height: 100px; border: 1px solid #a9c1d2; clip-path: polygon( 15px 0px, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 calc(100% - 15px), 0 15px ); background: linear-gradient(-45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom right, linear-gradient(135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top left, linear-gradient(-135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top right; } .clip-remove-bottom-right-angle { width: 250px; height: 100px; margin-bottom: 10px; text-align: center; line-height: 100px; border: 1px solid #a9c1d2; clip-path: polygon( 15px 0px, calc(100% - 15px) 0, 100% 15px, 100% 100%, 100% 100%, 15px 100%, 0 calc(100% - 15px), 0 15px ); background: linear-gradient(45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom left, linear-gradient(135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top left, linear-gradient(-135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top right; } .clip-top-left { width: 250px; height: 100px; margin-bottom: 10px; text-align: center; line-height: 100px; border: 1px solid #a9c1d2; clip-path: polygon( 15px 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 calc(100% - 15px), 0 15px ); background: linear-gradient(135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top left; } .clip-top-right { width: 250px; height: 100px; margin-bottom: 10px; text-align: center; line-height: 100px; border: 1px solid #a9c1d2; clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0% 100%, 0 100%, 0 0); background: linear-gradient(-135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top right; } .clip-bottom-right { width: 250px; height: 100px; margin-bottom: 10px; text-align: center; line-height: 100px; border: 1px solid #a9c1d2; clip-path: polygon( 0 0, 100% 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 100%, 0 0 ); background: linear-gradient(-45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom right; } .clip-bottom-left { width: 250px; height: 100px; margin-bottom: 10px; text-align: center; line-height: 100px; border: 1px solid #a9c1d2; clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 15px 100%, 0 calc(100% - 15px), 0 0); background: linear-gradient(45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom left; } .clip-top-left-to-bottom-right { width: 250px; height: 100px; margin-bottom: 10px; text-align: center; line-height: 100px; border: 1px solid #a9c1d2; clip-path: polygon( 15px 0, 100% 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 calc(100% - 15px), 0 15px ); background: linear-gradient(-45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom right, linear-gradient(135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top left; } .clip-top-right-to-bottom-left { width: 250px; height: 100px; margin-bottom: 10px; text-align: center; line-height: 100px; border: 1px solid #a9c1d2; clip-path: polygon( 0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px), 0 0 ); background: linear-gradient(45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom left, linear-gradient(-135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top right; } .clip-two-angle2 { width: 250px; height: 280px; margin-bottom: 10px; text-align: center; line-height: 280px; border: 1px solid transparent; clip-path: polygon( 15px 0px, 100% 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 0 ); background: linear-gradient(-45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom right, linear-gradient(45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom left, linear-gradient(180deg, #dceefe 0%, #edf1fa 100%); border-top: none; border-image: linear-gradient(180deg, rgba(169, 193, 210, 0), rgba(169, 193, 210, 1)) 2 2; } </style>