CSS Gradient border with :after - css

Question

css question.
Is it possible to add a gradient to a border that reflects to the div above?
I can add a solid color, cannot seem to find something for a gradient.
current status
.offerBox {
width: 360px;
height: 170px;
position: relative;
border-radius: 5px;
background: linear-gradient(to right, #fcd651 0%,#f9c100 100%);
}
.offerBox:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-top-color: #f9c100;
border-width: 30px;
margin-left: -30px;
}
<div class="offerBox"></div>
Thanks!

Answer 1

You can remove border and apply gradient to :after background
use transform: rotate(45deg); to give it the triangle look.
and z-index: -1; will push it below the offer div.
.offerBox:after {
top: calc(100% - 15px);
left: 50%;
content: " ";
height: 30px;
width: 30px;
position: absolute;
pointer-events: none;
background: linear-gradient(to right, #fcd651 0%, #f9c100 100%);
margin-left: -30px;
transform: rotate(45deg);
z-index: -1;
}
SNIPPET
.offerBox {
width: 360px;
height: 170px;
position: relative;
border-radius: 5px;
background: linear-gradient(to right, #fcd651 0%, #f9c100 100%);
}
.offerBox:after {
top: calc(100% - 15px);
left: 50%;
content: " ";
height: 30px;
width: 30px;
position: absolute;
pointer-events: none;
background: linear-gradient(to right, #fcd651 0%, #f9c100 100%);
margin-left: -30px;
transform: rotate(45deg);
z-index: -1;
}
<div class="offerBox"></div>

Answer 2

You can use as a background, you can change color of gradient as you need. if you need align center bottom you can usetransform:rotate(45deg) translate(-50%, 0); in .offerBox:afterand update top as you need
.offerBox {
width: 360px;
height: 170px;
position: relative;
border-radius: 5px;
background: linear-gradient(to right, #fcd651 0%, #f9c100 100%);
}
.offerBox:after {
top: 95%;
left: 50%;
content: " ";
display: block;
height: 30px;
width: 30px;
background: linear-gradient(to right, tomato 50%, green 100%);
position: absolute;
pointer-events: none;
z-index: -1;
transform: rotate(45deg) translate(-50%, 0);
}
<div class="offerBox"></div>

Answer 3

A possible way to solve your problem : using :before and :after to draw a "box footer" using skew to make a triangle, so that you have a responsive and accurate background gradient.
.offerBox {
position relative;
width: 360px;
height: 170px;
position: relative;
border-radius: 5px;
background: linear-gradient(to right, #fcd651 0%, #f9c100 100%);
}
.offerBox:before {
position: absolute;
bottom: -5px;
left: -10px;
content: " ";
height: 30px;
width: 50%;
pointer-events: none;
background: white;
transform: skew(45deg);
}
.offerBox:after {
position: absolute;
bottom: -5px;
right: -10px;
content: " ";
height: 30px;
width: 50%;
pointer-events: none;
background: white;
transform: skew(-45deg);
}
<div class="offerBox"></div>