css实现一个自适应多边形带有内阴影的边框

效果预览

如图所示,整个边框的折线是用clip-path实现的,使用box-shadow做阴影的话右上角及右下角的阴影是会被裁剪掉的,尝试了一些常规办法都实现不了,每次到这种时候,心里一定要暗示自己:css的奇技淫巧都是"障眼法"…
解决方案就是在右下角和右上角再分别绘制一个把方块补齐的多边形,给多边形加drop-shadow属性添加外阴影.这样就只有阴影部分被边框的clip-path裁剪进来,实现上述效果.
代码如下,是一个vue组件,能够自适应不同的内容

<template>
  <div class="container">
    <div
      class="wrap"
      @click="click"
      :style="`padding:${padding}; text-align:${position};`"
    >
      <slot></slot>
      <div class="border-left-top"></div>
      <div class="right-top">
        <div class="right-top-box"></div>
      </div>
      <div class="border-left-bottom"></div>
      <div class="right-bottom">
        <div class="right-bottom-box"></div>
      </div>
    </div>

    <div class="border-decorate">
      <img src="@/assets/bigSreen/border.png" alt="" />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    padding: {
      type: String,
      default: "15px 20px",
    },
    position: {
      type: String,
      default: "left",
    },
  },
  methods: {
    click() {
      this.$emit("click");
    },
  },
};
</script>
<style lang="scss" scoped>
@mixin border {
  position: absolute;
  width: 13px;
  height: 13px;
  border-color: #0cbeff;
  border-style: solid;
  border-width: 3px;
}
.container {
  position: relative;
  overflow-y: hidden;
  .wrap {
    width: 100%;
    height: 100%;
    // color: #00a9e0;
    box-shadow: 0px 0px 10px #104781 inset;
    // background-color: rgb(141, 83, 83);
    clip-path: polygon(
      0 0,
      calc(100% - 100px) 0,
      calc(100% - 85px) 15px,
      calc(100% - 15px) 15px,
      100% 30px,
      100% calc(100% - 20px),
      calc(100% - 20px) 100%,
      0 100%
    );
    .border-left-top {
      @include border;
      left: 0;
      top: 0;
      border-right-width: 0;
      border-bottom-width: 0;
      // border-radius: 10px 0 0 0;
    }
    .border-left-bottom {
      @include border;
      left: 0;
      bottom: 0;
      border-top-width: 0;
      border-right-width: 0;
      // border-radius: 0 0 0 10px;
    }
    .right-top {
      position: absolute;
      top: 0;
      right: 0;
      filter: drop-shadow(0 0 10px #104781);
      .right-top-box {
        position: absolute;
        background-color: #104781;
        height: 30px;
        width: 100px;
        top: 0;
        right: 0;
        clip-path: polygon(0 0, 100px 0, 100px 30px, 85px 15px, 15px 15px);
      }
    }
    .right-bottom {
      position: absolute;
      bottom: 0;
      right: 0;
      filter: drop-shadow(0 0 10px #104781);
      .right-bottom-box {
        position: absolute;
        background-color: #104781;
        height: 20px;
        width: 20px;
        bottom: 0;
        right: 0;
        clip-path: polygon(100% 0, 100% 100%, 0 100%);
      }
    }
  }
  .border-decorate {
    position: absolute;
    right: 8px;
    top: -8px;
    transform: scale(0.8, 0.7);
  }
}
</style>

总结

clip-path属性的兼容性还不是太好,edge和360浏览器上试了试,效果挺奇怪的,所以慎用.
不好实现的东西先在网上搜案例,拓宽思路,实在找不到案例时只能求助"障眼法".但前提是必须对css有足够深入的认识,不然是没法做到融会贯通的.