使用 clip-path 实现不规则边框

阁下何不同风起？

于 2025-07-17 17:34:02 发布

阅读量100

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/yueye_wu/article/details/149426601

<template>
  <div class="irregular-container">
    <div class="border_1">
      <div class="content">
        <div class="border_2">
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
</script>

<style scoped>
.irregular-container {
  /* position: relative; */
  width: 100%;
  height: 100%;
}

.border_1 {
  width: 100%;
  height: 100%;
  /* 使用clip-path创建不规则形状 */
  clip-path: polygon(
    40px 0,
    250px 0,
    282px 36px,
    100% 36px,
    100% calc(100% - 25px),
    calc(100% - 25px) 100%,
    calc(100% - 96px) 100%,
    calc(100% - 104px) calc(100% - 8px),
    12px calc(100% - 8px),
    12px 136px,
    0 131px,
    0 40px
  );

  background: #00ffff;
  position: relative;
}

.border_1::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  /* 使用clip-path创建不规则形状 */
  clip-path: polygon(
    41px 1px,
    249px 1px,
    281px 37px,
    calc(100% - 1px) 37px,
    calc(100% - 1px) calc(100% - 26px),
    calc(100% - 26px) calc(100% - 1px),
    calc(100% - 95px) calc(100% - 1px),
    calc(100% - 103px) calc(100% - 9px),
    13px calc(100% - 9px),
    13px 135px,
    1px 130px,
    1px 41px
  );
  background: radial-gradient(50% 50% at 50% 50%, #083053 0%, #05172d 100%);
}

.content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 45px 12px 21px 23px;
}

.border_2 {
  width: 100%;
  height: 100%;
  /* 使用clip-path创建不规则形状 */
  clip-path: polygon(
    16px 0,
    100% 0,
    100% calc(100% - 18px),
    calc(100% - 14px) 100%,
    0 100%,
    0 23px
  );
  position: relative;
  background: #00ffff;
}

.border_2::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  clip-path: polygon(
    17px 1px,
    calc(100% - 1px) 1px,
    calc(100% - 1px) calc(100% - 19px),
    calc(100% - 15px) calc(100% - 1px),
    1px calc(100% - 1px),
    1px 24px
  );
  background: radial-gradient(50% 50% at 50% 50%, #083053 0%, #05172d 100%);
}
</style>