My Objective:
My goal is to have both the arrow container and the full-width bar share the same gradient. I initially tried creating them separately and applying the gradient individually, but it resulted in a clipped look.
Codepen: https://codepen.io/sigurdmazanti/pen/bGarpvJ
Snippet:
.container {
background: white;
width: 100%;
height: 71px;
}
.arrow-container {
height: 34px;
width: 118px;
border-radius: 15px 15px 0 0;
text-align: center;
margin: 0 auto;
color: white;
background: transparent linear-gradient(180deg, #415fb4 0%, #0e2460 100%) 0 0 no-repeat padding-box;
}
.bar {
height: 37px;
background: transparent linear-gradient(180deg, #415fb4 0%, #0e2460 100%) 0 0 no-repeat padding-box;
}<div class="container">
<div class="arrow-container">↑</div>
<div class="bar"></div>
</div>I then thought of using a full-width and full-height overlay with the gradient, and utilizing background-clip to clip the elements so they both share the gradient. However, I'm facing some challenges with this approach and it seems like I might be implementing it incorrectly.
Codepen: https://codepen.io/sigurdmazanti/pen/popryWz
Snippet:
.container {
overflow: hidden;
background: white;
width: 100%;
height: 71px;
}
.bg-gradient {
background: transparent linear-gradient(180deg, #415fb4 0%, #0e2460 100%) 0 0 no-repeat padding-box;
background-clip: content-box;
width: 100%;
height: 100%;
}
.arrow-container {
height: 34px;
width: 118px;
border-radius: 15px 15px 0 0;
text-align: center;
margin: 0 auto;
background-color: red;
}
.bar {
height: 37px;
background-color: red;
}<div class="container">
<div class="bg-gradient">
<div class="arrow-container">↑</div>
<div class="bar"></div>
</div>
</div>I cannot use ::after & ::before pseudo-elements as the arrow-element requires an event handler. Am I heading in the right direction, or is this outcome achievable?
Thank you!