Как сделать градиент верхней границы с радиусом? - PullRequest
Новая
       123

Как сделать градиент верхней границы с радиусом?

0 голосов
/ 12 апреля 2020

Я пытался создать верхнюю градиентную границу для поля с радиусом. Градиентная граница должна быть только в верхней части окна, и она должна иметь такой же радиус (5 пикселей), как и остальная часть окна. Конечный результат должен выглядеть следующим образом:

How the box with the gradient top border should look

Мой текущий код: 

.card {
  text-align: center;
  margin: 0 1%;
  background-color: #252a41;
  border-radius: 5px;
  border: none;
  width: 25%;
  padding: 3% 0;
}

.instagram {
  border-top: 3px solid rgb(243, 242, 241);
  border-radius: 5px;
  border-image: linear-gradient(to right, #fdc468, #ffa263, #ff806c, #f9607f, #df4996) 1 / 3px 0px 0px 0px / 0px 0px 0px 0px round;
  position: relative;
}
<div class="card instagram">
  <div class="row">
    <img src="images/icon-instagram.svg" alt="instagram icon" />
    <span class="small-text username">@realnathanf</span>
  </div>
  <h1 class="followers-count">11k</h1>
  <p class="small-text followers">FOLLOWERS</p>
  <div class="row">
    <img src="images/icon-up.svg" alt="icon up" />
    <span class="change change-up">1099 Today</span>
  </div>
</div>

Очевидно, свойство border-image несовместимо с радиусом границы, поэтому я должен создать псевдоэлемент до / после. Однако я не мог понять, как сделать один для желаемого результата.

1 Ответ

0 голосов
/ 12 апреля 2020

Вы можете сделать это только с фоном: 

.box {
  width:200px;
  height:200px;
  border-radius:5px;
  background:
     linear-gradient(to right, #fdc468, #ffa263, #ff806c, #f9607f, #df4996) top/100% 5px no-repeat,
     #000;
}
<div class="box">

</div>
...