CSS угловой линейный градиент с «вложенным» градиентом - PullRequest
Новая
       30

CSS угловой линейный градиент с «вложенным» градиентом

0 голосов
/ 20 ноября 2018

Это то, чего я пытаюсь достичь:

desired-gradient

Голубые линии - просто маркеры.Я хочу угол от фиксированного пикселя от центра (слева).И я также хочу, чтобы темно-синий слева был также градиентом.

Я могу выбрать нужный угол, но я застрял в том, чтобы расположить его в фиксированной точке от центра и сделать темнеечасть другого углового градиента: 

.topbar {
  height: 150px;
  background: rgb(28,25,84);
  background: linear-gradient(-63deg, rgba(28,25,84,1) 50%, rgba(20,18,63,1) 0);
}
<div class="topbar"></div>

Спасибо!

1 Ответ

0 голосов
/ 21 ноября 2018

Вы можете иметь многократный фон, как показано ниже:

Я установил фиксированное расстояние от центра, равное 200px, которое является шириной одного градиента, смещенного на половину 200px от центра: 

.topbar {
  height: 150px;
  background: 
    
    /* the markers*/
    linear-gradient(yellow,yellow) center/2px 100%,
    linear-gradient(yellow,yellow) 25% 0/2px 100%,
    linear-gradient(yellow,yellow) 75% 0/2px 100%,
    /* the needed background*/
    linear-gradient(-63deg, rgba(28,25,84,1) 50%,transparent 0) calc(50% - 100px) 0/200px 100%,
    linear-gradient(rgba(28,25,84,1),rgba(28,25,84,1)) right/50% 100%,
    linear-gradient(to bottom, red,blue);
  background-repeat:no-repeat;
}
<div class="topbar"></div>

Вы можете проверить этот ответ для более подробной информации о том, как background-position работает с процентными значениями: Использование процентных значений с background-position на линейном градиенте

...