Responsive triangle with css question
I am making a responsive triangle (down arrow) using css. My problem is that I want to increase my triangle height downward. But when I enlarge the bottom bottom, it distorts the shape of the triangle.
Here is my code:
.btna {
position: relative;
display: inline-block;
height: 50px;
width: 25%;
text-align: center;
color: white;
line-height: 50px;
text-decoration: none;
padding-bottom: 15%;
background-clip: content-box;
overflow: hidden;
}
.btna div {
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;
-webkit-transform: rotate(-30deg) skewX(30deg);
-ms-transform: rotate(-30deg) skewX(30deg);
transform: rotate(-30deg) skewX(30deg);
}
<div class="btna">
<div></div>
</div>
+3
source to share
1 answer
I'm guessing you want to keep the triangle within your .btna class, right?
The following code preserves the triangle and also makes it so that it has a large height and remains responsive.
Replace transform: rotate(-30deg) skewX(30deg);
with
transform: rotate(-45deg) scale(1.4);
Skew can be very useful for turning any triangle into a right triangle, but because we're all ready to start with one (square with overflow disabled) then it's not very useful.
+3
source to share