Issue
How to add the green bar inside the triangle just like this photo ?
I have try to add a triangle css, but I have no idea how to write the green bar into the triangle css.
css file:
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 210px 100vw;
border-color: transparent transparent #1a202c;
}
layout code:
<div className={styles.triangle} />
Solution
If you are looking for CSS solution, you may be able to play around with multiple triangles here and get the desired results.
Something like this:
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 210px 100vw;
border-color: transparent transparent #1a202c;
}
.triangle::before {
position: relative;
left: -50vw;
top: -19px;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 105px 50vw;
border-color: transparent transparent #83e5da;
}
.triangle::after {
position: relative;
left: -100vw;
top: -16px;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 105px 50vw;
border-color: transparent transparent #1a202c;
}
<div class="triangle">
</div>
Answered By - subodhkalika
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.