css Question posted in
Some basic documentation can be found here.

How to create a downwards arrow in CSS that changes size according to screen size?

I have a CSS arrow that points down.

.bottom {
  display: inline-block;
  width: 2em;
  height: 2em;
  border: 0.2em solid #333;
  border-radius: 50%;
}

.bottom:after {
  content: '';
  display: inline-block;
  margin-top: 0.2em;
  width: 0.7em;
  height: 0.7em;
  border-top: 0.2em solid #333;
  border-right: 0.2em solid #333;
  -moz-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
<div class="accordionArrow">
    <a href="#"><span class="bottom"></span></a>
</div>

This code works as it is supposed to. It creates a circle and places an downward facing arrow in the center. If I resize the window width, the circle remain the same size and arrow remains at the center.

However, all other properties in my CSS are expressed in ‘vw’. That way, when I resize the window, the fonts change their size too. I tried converting the ’em’ sizes in this CSS to ‘vw’ and it doesn’t work properly. The arrow moves out of the circle as I change the window size.
What do I need to do?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Here is the final code based on @Alohci's comment above. This seems to work as expected

    CSS

    .bottom {
  display: inline-block;
  font-size: 2vw;
  width: 2em;
  height: 2em;
  border: 0.2em solid #333;
  border-radius: 50%;
  /* margin-left: 0.75em; */
}

.bottom:after {
  content: '';
  display: inline-block;
  margin-top: 0.2em;
  width: 0.7em;
  height: 0.7em;
  border-top: 0.2em solid #333;
  border-right: 0.2em solid #333;
  -moz-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

    HTML

    <div className="accordionArrow">
  <a href="#"><span className="top"></span></a>
</div>

    If you want an arrow facing in any other direction, just play with the rotation degrees.


  2. 0

    I would use an SVG (either inline or external) instead of doing a CSS hack.

    .i1 {
  width: 10vw;
}
    <img class="i1" src="https://donald.au/bugs/so-78337837/arrow-circle.svg">

    After running this snippet, use the full page link to test the responsiveness.

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

Back To Top
Search