I'm attempting to add a triangular arrow beneath the v-container, complete with a gradient color scheme. However, I'm struggling to integrate the gradient seamlessly.
If I use CSS to create the arrow, the gradient doesn't align correctly.
Does anyone have any suggestions on how to accomplish this?
Below is the provided code snippet:
HTML:
<div id="app">
<v-container fluid pa-0 class="gradient white--text">
<v-layout row wrap text-xs-center>
<v-flex xs12>
<h1 class="display-1 my-5">Lorem Ipsum</h1>
</v-flex>
</v-layout>
</v-container>
<div class="bottom-arrow"></div>
</div>
CSS:
.gradient{
height: 300px;
background: rgb(0,105,173);
background: linear-gradient(45deg, rgba(0,105,173,1) 0%, rgba(34,84,132,1) 100%);
}
.bottom-arrow:after {
content:'';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: 50px solid rgb(0,105,173);
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}