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

    }