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

Question

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

До сих пор я смог построить div, но не градиент:

.fade {
  margin: 2em 2em; padding-top: 2em; padding-bottom: 2em;
  background: rgb(242,242,194);

  border-right: 3em black solid;
  border-left: 3em black solid;
  border-image: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 242, 194) 100%);
{

<div class="fade">Text</div>

То, что происходит, можно увидеть выше: линейный градиент корректно переопределяет черный, чтобы сделать желтую границу, но я не ищу затухания белого. На самом деле градиента нет вообще.

Конечный продукт должен выглядеть так:

Куда я иду не так?

Answer 1

div {
  background: linear-gradient(90deg, white 0%, rgb(242, 242, 194) 8%, rgb(242, 242, 194) 92%, white 100%);
  padding: 15px;
  margin: 30px;
}
p {
  padding-left: 50px;
}

<div><p>Text</p></div>

Answer 2

Если вы не знакомы с градиентами и не хотите с ними связываться, вам следует использовать инструмент градиента Colorzilla: http://www.colorzilla.com/gradient-editor/

    .fade {
      margin: 2em 2em; padding-top: 2em; padding-bottom: 2em;
      background: linear-gradient(90deg, white 0%, rgb(242, 242, 194) 5%, rgb(242, 242, 194) 95%, white 100%);
    }

<div class="fade">Text</div>

Может быть, что-то подобное может быть полезным?

Я объясню, что я сделал.

Я удалил каждый атрибут, содержащий border, и использовал только background.

background: linear-gradient(90deg, white 0%, rgb(242, 242, 194) 5%, rgb(242, 242, 194) 95%, white 100%);

Этот градиент имеет 4 шага:

• Первый шаг говорит о том, что градиент должен начинаться белым цветом.
• Второй шаг (5% ширины элемента) говорит о том, что градиент следует за желтым.
• До третьего шага (95% ширины элемента).
• Затем на четвертом шаге он снова заканчивается белым.

Обратите внимание , что эти проценты для ширины, потому что вы повернули градиент на 90 градусов, с 0 или 360 вы будете влиять на высоту части градиента.

Последняя деталь, вам понадобится отступ внутри div, чтобы текст выглядел точно так же, как ваша фотография.