I have a div <div class="arrow-up"> that defines a triangle using CSS.
Here’s an example :
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}<div class="arrow-down"></div>I’m trying to make the triangle size responsive when the window is resized. I tried changing the boder from px to vh but it didn’t change anything.
4
.arrow-down {
width: 0;
height: 0;
border-left: 5vw solid transparent;
border-right: 5vw solid transparent;
border-top: 5vh solid #f00;
}<div class="arrow-down"></div>1
You are probably looking for the clamp() function:
.arrow-down {
--size: clamp(4px, 3vmin, 20px);
width: 0;
height: 0;
border-left: var(--size) solid transparent;
border-right: var(--size) solid transparent;
border-top: var(--size) solid #f00;
}<div class="arrow-down"></div>