纯css斜箭头

Question

如上图，请问这种斜箭头怎么实现。网上找了方法，设置四个方向的border，实现斜箭头。但是不能实现中间是透明的，求指教。

目前只找了个斜箭头，不过只是内斜的，不能向外斜，且不能透明

width: 0;
height: 0;
border-left: 57px solid transparent;
border-right: 17px solid transparent;
border-top: 30px solid #777;
font-sie: 0;

Answer 1

.line {
      position: relative;
      display: block;
      width: 400px;
      height: 200px;
      border: 6px solid #65A7EF;
    }

    .line::after {
      content: '';
      position: absolute;
      width: 82px;
      height: 30px;
      border-right: 8px solid #65A7EF;
      border-bottom: 4.5px solid #65A7EF;
      transform: rotate(34deg) skew(51deg);
      left: 133px;
      top: -18.7px;
      z-index: 1;
      background: #fff;
    }

Answer 2

如果是这种箭头用CSS做的话，我想可以做两个外形一样，但大小不一样的，大三角是白色，小三角是蓝色，小三角盖住大三角。但即使能做出来，估计也没人这么干。我以前在几个网站上见过类似的这种箭头，无一例外都是用的小三角的背景图。只有纯色的三角才会有的网站用CSS的border做。

Answer 3

用canvas画

Answer 4

之前看到过用纯css画了一个很复杂的动画人物，可以看出css还是挺强大的，不过目前来说，用css画图确实不怎么样，可以考虑用canvas，或者直接叫美工画一个。如果非要用css，可以去网上找找，应该有类似文章，不过归根结底都不是非常规范的做法，而且兼容性也可能有问题。

Answer 5

这不就是2条线吗？