how to add a shape divider in vuetify.js - vue.js

Question

I am using vuetify and I'm trying to add a shape divider like what I've shown in the picture, but I'm unable to do it.

Answer 1

You need to do that with HTML and CSS.
There is some ways.
It would be done with a background image
Another way is a svg file and css
Do it with css transform
You can check this codepen
header {
position: relative;
height: 300px;
background-image: linear-gradient(#ff9d2f, #ff6126);
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
text-align: center;
}
header h1 {
color: white;
}
.divider {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100px;
/* drop the height to have a constant angle for all screen widths */
}
<header>
<h1>Header Content</h1>
<img src="https://assets.codepen.io/t-517/divider-triangle.png" class="divider" />
</header>
<section>
<h1>Section Content</h1>
</section>
to get Idea how to make it as 2nd way .
and this one codepen for make it with css transform(third way).
header {
position: relative;
height: 300px;
overflow: hidden;
}
.header__bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(#ff9d2f, #ff6126);
transform: skewY(-6deg);
transform-origin: top left;
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
text-align: center;
}
header h1 {
position: relative;
color: white;
}
<header>
<div class="header__bg"></div>
<h1>Header Content</h1>
</header>
<section>
<h1>Section Content</h1>
</section>