Как элемент с псевдоклассом before окрасить в градиент?

Question

[Роман Томми]

Доброго времени суток.

Как белый квадрат, которому принадлежит черный квадрат через псевдокласс before, покрасить в один цвет?
Белый квадрат при наведении перекрашивается в градиент.

<div class="package-block-price">
       <p>$12.0/m</p>
  </div>

.package-block-price {
            background-image: -moz-linear-gradient( 0deg, rgb(253,113,44) 0%, rgb(242,23,128) 100%);
            background-image: -webkit-linear-gradient( 0deg, rgb(253,113,44) 0%, rgb(242,23,128) 100%);
            background-image: -ms-linear-gradient( 0deg, rgb(253,113,44) 0%, rgb(242,23,128) 100%);
            background: #ffffff;
            height: 80px;
            &:before {
                content: "";
                position: absolute;
                left: 15px; 
                margin-top: 80px;
                border-top: 40px solid;
                border-top-color: -webkit-linear-gradient( 0deg, rgb(253,113,44) 0%, rgb(242,23,128) 100%);
                border-left: 134px solid transparent;
                border-right: 120px solid transparent;
             &:hover {
                      background-image: -moz-linear-gradient( 0deg, rgb(253,113,44) 0%, rgb(242,23,128) 100%);
                      background-image: -webkit-linear-gradient( 0deg, rgb(253,113,44) 0%, rgb(242,23,128) 100%);
                      background-image: -ms-linear-gradient( 0deg, rgb(253,113,44) 0%, rgb(242,23,128) 100%);
              }

Comments

[Роман Томми]

Moon Presence, спасибо, сейчас так и поступлю.

Answer 1

[oelena]

https://jsfiddle.net/ElenaOr/p6sbovyn/2/ - вариант, если градиент должен смотреться равномерно и на элементе и на псевдоэлементе.
И элементу с абсолютным позиционированием не нужен margin, у него есть top, left, right и bottom

border-top-color: -webkit-linear-gradient( 0deg, rgb(253,113,44) 0%, rgb(242,23,128) 100%);

- градиент это только image, а не color

.package-block-price {
            background-image: -moz-linear-gradient( 0deg, rgb(253,113,44) 0%, rgb(242,23,128) 100%);
            background-image: -webkit-linear-gradient( 0deg, rgb(253,113,44) 0%, rgb(242,23,128) 100%);
            background-image: -ms-linear-gradient( 0deg, rgb(253,113,44) 0%, rgb(242,23,128) 100%);
            background: #ffffff;

Зачем background-image здесь? Вы его background перебиваете.