As an element with pseudo-class before to paint the gradient?

Good time of day.

As the white square, which owns the black square using the before pseudo-class, to paint in one color?
White square when you hover its color in the gradient.

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%);
 }
April 4th 20 at 12:55
1 answer
April 4th 20 at 12:57
https://jsfiddle.net/ElenaOr/p6sbovyn/2/ - option if the gradient should look evenly and element and pseudo-element.
And the element with absolute positioning is not desired margin, it has top, left, right, and bottom

border-top-color: -webkit-linear-gradient( 0deg, rgb(253,113,44) 0%, rgb(242,23,128) 100%);
- the gradient is just the image and not 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;

Why background-image here? You kill background.

Find more questions by tags CSS