Good day! I have a triangle shape with borders on css. But for some reason, when scaling the screen in the browser, this figure is distorted. Tell me, please, how can I fix this, or do it differently? Thank!

body, html {background:#fff;} .bar { display: block; position: relative; width: 100%; height: 50px; background-color: #f1f1f1; border-bottom: 1px solid #e5e5e5; } .active-ico { position: absolute; bottom: 0; margin-left: 50%; left: -8px; margin-bottom: -1px; border: 8px solid transparent; border-bottom: 10px solid #ccc; width: 0; height: 0; } .active-ico:before { content: ""; display: block; position: absolute; bottom: -9px; margin-left: 50%; left: -8px; margin-bottom: -2px; border: 8px solid transparent; border-bottom: 10px solid #fff; width: 0; height: 0; } 
 <div class="bar"><div class="active-ico"></div></div>

  • one
    What does "distorted" mean? - Alexey Shimansky
  • Alexey, I greet you! The inner triangle is shifted slightly to the side, and it turns out as if on one side the border disappears, and on the other it becomes wider. - LADYX
  • screencast.com/t/XFWEBdNS Everything looks like a buzz (chrome) - MihailPw
  • AGS17 welcome you! Distortion is observed when scaling / enlarging the page in the browser. And with a scale of 100% is displayed correctly. This is what confuses me. - LADYX

1 answer 1

You can remake on SVG, when I scale it does not break.

 header { background-color: #f1f1f1; height: 100px; position: relative; border: 1px solid #ccc; } .triangle { fill: #fff; stroke: #ccc; position: absolute; left: 50%; margin-left: -8px; bottom: -1px; } 
 <header> <svg width=16 height=8 class=triangle> <polyline points="0,8 8,0 16,8" /> </svg> </header>

  • Alexander, I greet you! Do you mean that you do not distort in the version that I have in question, on css? And thank you for the alternative on svg. - LADYX
  • one
    No, I mean that is not distorted if you use SVG, and your version is distorted as you described. - Sasha Omelchenko
  • I understand, thank you! - LADYX