Responsive triangle right side with css

Question

I am making responsive triangle(right arrow) with css.My problem is height width is not increase .also can we change border in transform.

Here is my css code:-

.triangle-right {
    width: 0;
    height: 0;
    padding-top: 5%;
    padding-bottom: 5%;
    padding-left: 5%;
    overflow: hidden;
    float:left;
}
.triangle-right:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-top:-500px;
    margin-left: -500px;

    border-top: 500px solid transparent;
    border-bottom: 500px solid transparent;
    border-left: 500px solid #4679BD;
}

like this

.class:after{content: "";
  position: absolute;
  top:0px;  left: 0;
 background: -webkit-linear-gradient(#d5adee, #fff); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#d5adee, #fff); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#d5adee, #fff); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#d5adee, #fff); /* Standard syntax */
  padding-bottom: 50%;
  width: 57.7%;
  z-index: -1;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
transform: rotate(-45deg) scale(1.4);
}

Kindly advice me any solution.

Answer 1

How about this i have used vw units for responsive

div {
  width: 20vw;
  height: 20vw;
  overflow: hidden;
  position: relative;
  border-left: 2px solid black;
}
div:after {
  position: absolute;
  content: "";
  width: 20vw;
  height: 20vw;
  transform: rotate(45deg);
  background: -webkit-linear-gradient(red,orange,yellow,green);
  background: -moz-linear-gradient(red,orange,yellow,green);
  background: -o-linear-gradient(red,orange,yellow,green);
  background: -ms-linear-gradient(red,orange,yellow,green);
  background: linear-gradient(red,orange,yellow,green);
  margin-left: -15vw;
  border-top: 2px solid black;
  border-right: 2px solid black;
}

<div></div>