Responsible triangle on the right with css
I am making a responsive triangle (right arrow) using css.My the problem is the width does not increase in height. Also we can change the border in the transformation.
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);
}
Please give me any solution.
+3
source to share
1 answer
How about this i used vw
units for responsiveness
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>
+2
source to share