- 效果
- 样式代码
<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>