1. css实现

1.1 强行实现

页面效果

image.png

代码

<template>
  <div class="angle-button">
    <div class="angle top-right"></div>
    <div class="angle top-left"></div>
    <div class="angle bottom-right"></div>
    <div class="angle bottom-left"></div>
    <span class="name"><slot></slot></span>
  </div>
</template>

<script>
export default {}
</script>
<style lang="scss" scoped>
.angle-button {
  width: 100px;
  height: 35px;
  cursor: pointer;
  background: rgba(237, 112, 83, 0);
  border: 1px solid #1983c2;
  position: relative;
  box-shadow: 0px 0px 30px rgb(9, 83, 143) inset;
  text-align: center;
  line-height: 35px;
  font-size: 16px;
  color: #80d2fa;
  margin: 0 10px;

  .angle {
    position: absolute;
    border-left: 8px solid rgb(1, 14, 41, 0.9);
    border-right: 8px solid transparent;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;

    &::before {
      content: '';
      position: absolute;
      right: 1px;
      width: 15px;
      height: 1px;
      background-color: #1983c2;
      z-index: 9999;
      transform: rotate(90deg);
    }
  }

  .top-right {
    top: -9px;
    right: -9px;
    transform: rotate(-45deg);
  }

  .top-left {
    top: -9px;
    left: -9px;
    transform: rotate(225deg);
  }

  .bottom-right {
    bottom: -9px;
    right: -9px;
    transform: rotate(45deg);
  }

  .bottom-left {
    bottom: -9px;
    left: -9px;
    transform: rotate(135deg);
  }
}
</style>

总结
不适用背景颜色变化较多时。

1.2 clip-path实现

页面效果

image.png

代码

<template>
   <div class="box">
     <div class="box-border">
       <div class="ono"></div>
     </div>
   </div>
</template>

<style scoped>
.box {
  width: 300px;
  height: 300px;
  background-color: green;
  overflow: hidden;
}

.box-border {
  margin: 20px;
  width: 122px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(18, 192, 195);
  /** filter: drop-shadow(0 0 10px #ff0000); */
  clip-path: polygon(
    10% 0,
    0 20%,
    0 80%,
    10% 100%,
    90% 100%,
    100% 80%,
    100% 20%,
    90% 0
  );
}

.ono {
  width: 120px;
  height: 60px;
  background-color: rgb(0, 30, 166);
  box-shadow: 0 0 20px #dddddd inset;
  /** filter: drop-shadow(0 0 10px #ff0000); */
  clip-path: polygon(
    10% 0,
    0 20%,
    0 80%,
    10% 100%,
    90% 100%,
    100% 80%,
    100% 20%,
    90% 0
  );
}
</style>

总结
使用css的clip-path属性截取按钮形状，通过div叠加的方式实现边框。clip-path属性暂未发现更好添加border的方式。
参考：CSS3剪贴路径（Clip-path）在线生成器工具

2. SVG实现

2.1 多边形SVG

2.1.1 填充背景

页面效果

image.png

代码实现

<div style="width: 20%; height: 10%; background-color: pink; padding: 20px">
    <svg height="100%" width="100%" viewBox="0,0,200,100">
        <polygon
          points="15 0, 0 15, 0 45, 15 60, 115 60, 130 45, 130 15, 115 0, 15 0 "
          style="fill: rgb(7, 74, 129); stroke: purple; stroke-width: 1"
        />
        <text x="25" y="35" fill="red">I love SVG</text>
    </svg>
</div>

2.2.1 渐变背景

页面效果

image.png

代码实现

<div style="width: 20%; height: 10%; background-color: pink; padding: 20px">
      <svg height="100%" width="100%" viewBox="0,0,200,100">
        <defs>
          <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
          </linearGradient>
        </defs>
        <polygon
          fill="url(#grad1)"
          points="15 0, 0 15, 0 45, 15 60, 115 60, 130 45, 130 15, 115 0, 15 0 "
          style="stroke: purple; stroke-width: 1"
        />
        <text x="25" y="35" fill="blue">I love SVG</text>
    </svg>
</div>

2.2.3 内渐变边框 （最接近CSS效果）

效果

image.png

代码实现

<div style="width: 20%; height: 10%; background-color: #000e35; padding: 20px;">
      <svg height="100%" width="100%" viewBox="0,0,200,100">
        <filter id="inset-shadow" x="-80%" y="-80%" width="200%" height="200%">
          <feComponentTransfer in=SourceAlpha>
            <feFuncA type="table" tableValues="1 0" />
          </feComponentTransfer>
          <feGaussianBlur stdDeviation="16"/>
          <feOffset dx="0" dy="1" result="offsetblur"/>
          <feFlood flood-color="#1283c2" result="color"/>
          <feComposite in2="offsetblur" operator="in"/>
          <feComposite in2="SourceAlpha" operator="in" />
          <feMerge>
            <feMergeNode in="SourceGraphic" />
            <feMergeNode />
          </feMerge>
        </filter>
        <polygon
          filter="url(#inset-shadow)"
          points="15 0, 0 15, 0 45, 15 60, 115 60, 130 45, 130 15, 115 0, 15 0 "
          style="stroke: #1283c2; stroke-width: 1"
        />
        <text x="25" y="35" fill="#81d3fa">I love SVG</text>
    </svg>
 </div>

通过feGaussianBlur的stdDeviation调节模糊半径, filter的id为唯一标识，filter的url用于绑定标识

参考自：SVG内发光实现(CSDN)

2.2 线条SVG

页面效果

image.png

代码实现

<div style="width: 20%; height: 10%; background-color: pink; padding: 20px">
      <svg height="100%" width="100%" viewBox="0,0,200,100">
        <polyline
          points="15 0,0 15,0 45,15 60, 115 60,130 45,130 15, 115 0, 15 0 "
          style="fill: none; stroke: black; stroke-width: 1"
        />
        <text x="25" y="35" fill="red">I love SVG</text>
     </svg>
</div>

（背景颜色设置同2.1）

---

svg: viewbox大小用于设置图标自适应
polyline\polygon: fill设置填充背景， stroke设置边框颜色， stroke-width设置边框宽度