CSS трехцветный диагональный фон

Question

Я пытаюсь создать 3-цветный фон с цветами по диагонали.

Я нашел отличный пример с цветами, которые мне нравятся здесь: Responsive Diagonal Two- Тоновые фоны с помощью CSS (от угла к углу)

.btn {
  background:#212531;
  background: linear-gradient(to right bottom, #2f3441 50%, #212531 50%);
  
  display:inline-block;
  padding:0.75em 2.0em;
  font-size:1.5em;
  text-align:center;
  margin:0.25em 0;
  color:#ffffff;
  font-weight:normal;
  text-transform:uppercase;
  font-family:sans-serif;
}

.btn:hover, .btn:focus {
  background:#2d3d64;
  background: linear-gradient(to right bottom, #415382 50%, #2d3d64 50%);
}



body { text-align:center; background:#e6e9f6; padding-top:1.0em; }
a { text-decoration:none; }

<a class="btn" href="#">Check Out My Background</a>

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

Как я могу этого добиться?

html css

0

Cody Pritchard 16 Авг 2019 в 01:57

Answer 1

Вы можете попробовать как ниже. Просто рассмотрите дополнительный градиент с диагональным направлением.

.box {
  width:200px;
  height:100px;
  background:
    linear-gradient(to bottom left ,transparent 50%,yellow 50.5%),
    linear-gradient(to bottom right,red         50%,blue   50.5%);
}

<div class="box">
</div>

2

Temani Afif 15 Авг 2019 в 23:04

Answer 2

Согласно этому примеру:

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Вы можете использовать что-то вроде этого:

background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);

0

cccn 15 Авг 2019 в 23:02

CSS трехцветный диагональный фон

2 ответа

Похожие вопросы

Новые вопросы

html