美文网首页
css和svg多边形按钮实现

css和svg多边形按钮实现

作者: 橙子只过今天 | 来源:发表于2021-10-11 11:33 被阅读0次

    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设置边框宽度

    相关文章

      网友评论

          本文标题:css和svg多边形按钮实现

          本文链接:https://www.haomeiwen.com/subject/omnlnltx.html