前端vue仪表盘式/五宫格异形按钮实现

想要的效果

设计的很好下次别设计了。。仅从技术角度探讨这种按钮是否能做

---

思路

• 设计提供了四个按钮hover状态时的背景svg图。
• 使用大圆减去小圆得到圆环的按钮形状，中间的按钮就绝对定位在中间，按钮与按钮之间的缝隙使用伪元素来遮挡，实际上按钮还是四分之一圆的形状。
• 伪元素使用到clip-path的css属性，使用了在线的Clip-Path编辑器，生成了基础的形状，最后在f12的开发者工具中手动调整polygon的各个参数，让箭头的形状和svg的边缘紧贴。
• 如果要加文字的话，目前的想法是内嵌在SVG里面，hover和正常状态时文字位置在同一处。
• 要么为每一个按钮创建一个canvas，然后在上下文ctx中创造一个圆弧arc()，让文字沿着弧线进行展示，最后给canvas添加鼠标穿透，应该就能实现，不过没试过，不知道可不可行。
• 我感觉我这种是委屈求全的方式，如果有更好的方式可以评论一下。

---

在线体验链接： https://crispychicken999.github.io/vite-threejs/button/2

附上代码：（vite+nuxt3）

<template>
  <el-button @click="$router.push('/')">Return to homepage</el-button>
  <div class="btn-demo-2" @click="handleClick">
    <button class="one"></button>
    <button class="two"></button>
    <button class="three"></button>
    <button class="four"></button>
    <button class="center">
      <el-icon><Setting /></el-icon>
    </button>
  </div>
</template>
 
<script setup>
useHead({
  title: "Button Demo - 2",
  meta: [
    {
      hid: "description",
      name: "description",
      content: "Button Demo",
    },
  ],
});
 
function handleClick(e) {
  ElMessage({
    message: `Button Clicked: ${e.target.classList[0].toUpperCase()}`,
    type: "success",
  });
}
</script>
 
<style lang="scss" scoped>
.btn-demo-2 {
  position: relative;
  width: 500px;
  height: 500px;
  background: #021224;
  border-radius: 50%;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  overflow: hidden;
  &::after {
    content: "";
    position: absolute;
    background-color: #021224;
    top: 50%;
    left: 50%;
    width: 370px;
    height: 370px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  button {
    width: 100%;
    height: 100%;
    background: #103653;
    color: #fff;
    border: none;
    position: relative;
    text-align: center;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s;
    &:hover {
      background-color: #15466b;
      cursor: pointer;
    }
    &:first-of-type {
      border-top-left-radius: 250px;
      &:hover {
        background-image: url("@/assets/svg/home_imge_lt.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-color: transparent;
      }
      &::after {
        content: "";
        position: absolute;
        width: 50px;
        height: 80px;
        background-color: #021224;
        z-index: 99;
        top: 0;
        right: -25px;
        pointer-events: none;
        // 箭头向右
        clip-path: polygon(60% 0, 93% 43%, 56% 84%, 7% 85%, 42% 40%, 10% -1%);
      }
    }
    &:nth-of-type(2) {
      border-top-right-radius: 250px;
      &:hover {
        background-image: url("@/assets/svg/home_imge_rt.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-color: transparent;
      }
      &::after {
        content: "";
        position: absolute;
        width: 80px;
        height: 50px;
        background-color: #021224;
        z-index: 99;
        bottom: -25px;
        right: 0px;
        pointer-events: none;
        // 箭头向上
        cursor: initial;
        clip-path: polygon(56% 11%, 109% 50%, 107% 99%, 58% 60%, 14% 101%, 15% 50%);
      }
    }
    &:nth-of-type(3) {
      border-bottom-left-radius: 250px;
      &:hover {
        background-image: url("@/assets/svg/home_imge_lb.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-color: transparent;
      }
      &::before {
        content: "";
        position: absolute;
        width: 50px;
        height: 80px;
        background-color: #021224;
        z-index: 99;
        bottom: 0;
        right: -25px;
        pointer-events: none;
        // 箭头向右
        clip-path: polygon(59% 17%, 98% 56%, 67% 100%, -1% 125%, 45% 56%, 7% 14%);
      }
      &::after {
        content: "";
        position: absolute;
        width: 80px;
        height: 50px;
        background-color: #021224;
        z-index: 99;
        top: -25px;
        left: 0px;
        pointer-events: none;
        // 箭头向上
        clip-path: polygon(43% -1%, 83% 37%, 84% 90%, 41% 50%, -18% 101%, -27% 50%);
      }
    }
    &:nth-of-type(4) {
      border-bottom-right-radius: 250px;
      &:hover {
        background-image: url("@/assets/svg/home_imge_rb.svg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-color: transparent;
      }
    }
    &:last-of-type {
      position: absolute;
      width: 160px;
      height: 160px;
      z-index: 999;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      color: #fff;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      transform: translate(-50%, -50%);
      font-size: 48px;
      transition: all 0.3s;
      background-color: #152a3b;
      box-shadow: inset 0 0 10px 2px #06b4c9;
      &:hover {
        color: #06b4c9;
        box-shadow: inset 0px 0px 18px 7px #01e9ff;
      }
    }
  }
}
</style>