pc端双六边形重叠效果（带边框的六边形）

首先我们最关注的当然是效果图
铛铛铛~效果图闪亮登场👇

此处应有掌声👏，
原理canvas+绝对定位+css绘制六边形
百度许久只有单个六边形，需求不一样，我也没办法，只能自己写
代码奉上↓↓↓↓↓↓↓↓↓↓↓↓
html代码

		<li>
            <canvas class="myCanvas" width='500' height='500'>测试</canvas>
            <div class="boxF">
              <div class="boxS">
                <div class="boxT" style="background: #F4F4F4;">
                  <img src="./img/idea.png" alt="">
                </div>
              </div>
            </div>
          </li>

css代码

li {
  margin-right: 45px;
  width: 370px;
  height: 426px;
  float: left;
  position: relative;
  overflow: hidden;
}
.boxF,
.boxS,
.boxT {
  width: 330px;
  height: 380px;
  overflow: hidden;
}
.boxF,
.boxS {
  box-sizing: content-box;
  visibility: hidden;
}
.boxF {
  position: absolute;
  left: 22px;
  top: 22px;
}
.boxF {
  transform: rotate(120deg);
  float: left;
  -ms-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -webkit-transform: rotate(120deg);
}
.boxS {
  transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
}
.boxT {
  transform: rotate(-60deg);
  background: no-repeat 50% center;
  background-size: 125% auto;
  -ms-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
  visibility: visible;
}
.boxT img {
  position: absolute;
  top: 100px;
  left: 140px;
}

js代码

var myCanvas = document.getElementsById("myCanvas");
    var context = myCanvas.getContext("2d");
    function drawPath(x, y, n, r) {
      var i, ang;
      ang = Math.PI * 2 / n //旋转的角度
      context.save(); //保存状态
      context.fillStyle = 'rgba(0,0,0,0)'; //填充半透明
      context.strokeStyle = '#E90000'; //线条红色
      context.lineWidth = 1; //设置线宽
      context.translate(x, y); //原点移到x,y处，即要画的多边形中心
      context.moveTo(0, -r); //据中心r距离处画点
      context.beginPath();
      for (i = 0; i < n; i++) {
        context.rotate(ang) //旋转
        context.lineTo(0, -r); //据中心r距离处连线
      }
      context.closePath();
      context.stroke();
      context.fill();
      context.restore(); //返回原始状态
    }
    drawPath(185, 213, 6, 213) //在185, 213处画一个半径为213的六边形

---

---

2022年2月10号更新
更好的方法是使用伪类
上面一个三角形，中间一个矩形，下面一个三角形
博主还没实践，各位大佬可以试试