Question 405439 in Html Question posted in
Some basic documentation can be found here.

Html – Resize CSS triangle with window size

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.

Tags:

2

Answers


  1. 0 
         .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>
    Login or Signup to reply.
  2. 0

    Many responsive elements are sized based on the horizontal width of the viewport (using vw units). Using 20vw instead of 20px should make it responsive to resizing the viewport width.

    References:
    https://www.w3schools.com/cssref/css_units.php
    https://www.w3schools.com/cssref/tryit.php?filename=trycss_unit_vw

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search