css 切角实现（全）

效果
样式代码

<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>