How to achieve this CSS triangle in the bottom of page.Created a triangle but unable to get the shape

Question

Need to achieve the following screenshot design with CSS. Have attached fiddle link with whatever tried.

<div class="outer">
<div class="inner">

</div>
</div>

.outer{
  position:relative;
}

.inner{
position:absolute;
right:0;
bottom:2;
width: 200px;
height: 200px;
background: linear-gradient(to bottom right,transparent 50%,#374073 -63.76%,#26D0CE 100%);
}

https://jsfiddle.net/antoclintonasr/djtcLh8e/1/

Answer 1

I made some changes as you can in the code snippet.

The border radius to make the triangle edge smooth and the transform to rotate the triangle. You can adjust the width and height of the inner rectangle to make the final shape thinner and longer if you want, and you can change the rotate angle to change the angle of the triangle.

.outer{
  position:relative;
}

.inner{
position:absolute;
right:0;
bottom:2;
width: 200px;
height: 200px;
background: linear-gradient(to bottom right,transparent 50%,#374073 -63.76%,#26D0CE 100%);

/* new code */
border-radius: 0 0 20px 0;
transform: rotate(135deg);
}

<div class="outer">
<div class="inner">

</div>
</div>