SOURCE

<div class="intro">
  <div>
    连接已重置
  </div>
  <div class="bottom-line">
    <div class="bottom-line-body"></div>
  </div>
</div>

.intro {
  width: 90px;
}


.bottom-line {
  height: 10px;
  position: relative;
  transform: skewX(-30deg);
  margin-top: -4px;
}

.bottom-line-body {
  position: absolute;
  left: 0;
  width: 90px;
  height: 100%;
  background: linear-gradient(270deg, #FF9D65 0%, #FF7D00 100%);
  opacity: 0.6;
}

.bottom-line-body:after,
.bottom-line-body:before {
  content: '';
  position: absolute;
  left: 0;
  height: 100%;
  background: linear-gradient(270deg, #FF9D65 0%, #FF7D00 100%);
}

.bottom-line-body:after {
  width: 110px;
  opacity: 0.3;
}

.bottom-line-body:before {
  width: 130px;
  opacity: 0.12;
}