css背景渐变实现箭头样式

css中使用background渐变实现箭头样式

        <div className={styles['quick-operate-area']}>
          <div className={`${styles['operate-card']}`}>
            <div className={styles['operate-card-content']}>111</div>
            <div className={`${styles['arrow-wrap']} ${styles['arrow-turn-right']}`} />
          </div>

          <div className={`${styles['operate-card']} ${styles['operate-card-disabled']}`}>
            <div className={`${styles['arrow-wrap']} ${styles['arrow-left']}`} />
            <div className={styles['operate-card-content']}>222</div>
            <div className={`${styles['arrow-wrap']} ${styles['arrow-turn-right']}`} />
          </div>

          <div className={styles['operate-card']}>
            <div className={`${styles['arrow-wrap']} ${styles['arrow-left']}`} />
            <div className={styles['operate-card-content']}>33</div>
          </div>
        </div>

.quick-operate-area {
  display: flex;
}
.operate-card {
  height: 64px;
  flex-basis: 33.33%;
  display: flex;
  cursor: pointer;
  .operate-card-content {
    padding: 0 16px;
    display: flex;
    flex: 1;
    align-items: center;
    background: #ebf5ff;
  }
}
.arrow-wrap {
  width: 12px;
}
.arrow-turn-right {
  background: linear-gradient(250deg, transparent 50%, #ebf5ff 50%) 100% 0%,
    linear-gradient(-70deg, transparent 50%, #ebf5ff 50%) 100% 100%;
  background-size: 100% 50%;
  background-repeat: no-repeat;
}
.arrow-left {
  background: linear-gradient(250deg, #ebf5ff 50%, transparent 50%) 100% 0%,
    linear-gradient(-70deg, #ebf5ff 50%, transparent 50%) 100% 100%;
  background-size: 100% 50%;
  background-repeat: no-repeat;
}