killStrikeFF
@killStrikeFF
Интересуюсь it сферой.

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

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

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

5e24a838468ed791447750.png

<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%);
              }
  • Вопрос задан
  • 316 просмотров
Пригласить эксперта
Ответы на вопрос 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 перебиваете.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы