css градиент прямоугольник

Question

Необходимо сделать фон блока таким образом

Думаю это возможно сделать через функцию linear gradient у background. Но получается только всегда в одну сторону, например

.space {
  padding: 100px;
}

.bg_right_top {
    background: linear-gradient(to bottom, #FFD19C 80%, white 20% ), 
                linear-gradient(to left, #FFD19C 80%, white 20% );
    border: 1px solid black;
}

<div class="bg_right_top space">

</div>

Один всегда перекрывает другой. Хотел бы узнать, как сделать так, чтобы выглядело как на картинке выше.

Answer 1

Немного не в ту сторону думаете..
У вас есть такие свойства как background-position и background-size.
Сделайте так, чтобы ваша картинка начиналась от верхнего правого края (background-position: top right;) и при этом чтобы до противоположного края не хватало 20%, т.е. background-size: 80% 80%;.

Таким способом мы сможем разместить градиент:

.bg {
  display: block;
  width: 200px;
  height: 150px;
  border: 1px solid red;
  background: linear-gradient(to right, blue, red) no-repeat top right / 80% 80%;
}

<div class="bg"></div>

Или же картинку:

.bg {
  display: block;
  width: 200px;
  height: 150px;
  border: 1px solid red;
  background: url('https://i.imgur.com/vwVxXlP.png') no-repeat top right / 80% 80%;
}

<div class="bg"></div>

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

.bg {
  display: block;
  width: 200px;
  height: 150px;
  border: 1px solid red;
  background: linear-gradient(to bottom, blue, blue) no-repeat top right / 80% 80%;
}

<div class="bg"></div>

БЛОГ НА HUSL

css градиент прямоугольник

Ответы (1 шт):