纯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;    }