渐变色斜纹样式实现

 <div class="item-bar">
     <span class="item-bar-inner"></span>
     <span class="item-bar-inner-level"></span>
 </div>

  .item-bar {
      position: relative;
      width: 78.74%;
      height: 1.85vh;
  }
  .item-bar-inner,
  .item-bar-inner-level {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 65%;
  }
  .item-bar {
      background: rgba(240, 255, 0, 0.2);
      border: 1px solid rgba(240, 255, 0, 0.4);
  }
  .item-bar-inner {
      background: linear-gradient(
        -45deg,
        rgba(242, 196, 0, 1) 25%,
        white 25%,
        white 50%,
        rgba(242, 196, 0, 1) 50%,
        rgba(242, 196, 0, 1) 75%,
        white 75%
      );
      background-size: 5px 5px;
  }
  .item-bar-inner-level {
      background: linear-gradient(
        to right,
        rgba(153, 101, 0, 0.8) 30%,
        rgba(153, 101, 0, 0.6) 50%,
        rgba(242, 196, 0, 0.4) 100%
      );
  }