响应三角形右侧与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>