Как «повесить» классу active left-border с градиентом?

Question

[Евгений Гайдуков]

<div class="nav_anchors">
    <ul>
      <li><a href="#" class="p-1 active">Abteilung</a></li>
      <li><a href="#" class="p-1">Leistungen</a></li>
      <li><a href="#" class="p-1">Downloads</a></li>
      <li><a href="#" class="p-1">Kooperationen</a></li>
      <li><a href="#" class="p-1">Sprechzeiten</a></li>
      <li><a href="#" class="p-1">Kontakt</a></li>
    </ul>
</div>

.nav_anchors {
  margin: 150px;
  ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  a {
  font-size: 13.3px;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: 2.25;
  letter-spacing: 0.6px;
  color: #85accb;
    &.active {
      color: #005093;
      border-left: 2px solid;
      border-color: linear-gradient(315deg, #52c0ea 0%, #0085c2);
    }
  }
}

Не могу сообразить, как выставить границу с градиентом, подскажите кто чем может)))

Answer 1

[RAX7]

Через border-image можно сделать border с градиентом
https://developer.mozilla.org/en-US/docs/Web/CSS/b...
https://jsfiddle.net/6ysw48gk/

Comments

[Евгений Гайдуков]

Дружище, огромное спасибо!

[Alfieros]

Не самое лучшее решение, учитывая что на CSS это легко сделать.

[Евгений Гайдуков]

Alfieros, а почему не самое лучшее? Вроде все норм, как и планировалось...

[RAX7]

Евгений Гайдуков, поддержка браузерами чуть хуже, чем сверстать тоже самое псевдо элементом с градиентом.
https://caniuse.com/#feat=border-image
https://caniuse.com/#feat=css-gradients

Answer 2

[Alfieros]

Свойство border-color не может принимать значение градиента, только конкретный цвет.
Вешайте свойство background-color для .active на псевдокласс .active:before, и там уже играйтесь с градиентом и шириной блока.
И да, лучше присваивать все стили конкретно к <li>.

Comments

[Евгений Гайдуков]

вроде понял, но нифига не получается...