1

I can create a tirangle using CSS trick with border, e.g: 

.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>

(from https://css-tricks.com/snippets/css/css-triangle/)

But, as you can see, it always has an even side length. It happens because it consists of two border sides - left and right. If I make one side shorter than other - it doesn't solve the problem, I only get not a equilateral triangle. If I have a triangle with odd side in design picture, I can use this method.

I think, transform could help, but I'm not sure, it's a good and strict enough method.

Is there any other solutions?

Martin
  • 16,093
  • 1
  • 29
  • 48
Sergey Beloglazov
  • 342
  • 1
  • 3
  • 14
  • 2
    Are you saying you want to create a scalene triangle? Could you provide an idea of what you are looking to produce? – Martin Jan 10 '20 at 14:20
  • from the duplicate: https://stackoverflow.com/a/49696143/8620333 (you will find all the type of triangle) – Temani Afif Jan 10 '20 at 14:26
  • @Martin, I am talking about isosceles triangles, with two equal sides. It may be a scalene triangle. E.g.: up/down triangles here for voting. Stackoverflow.com uses svg icons for them. They also has even horisontal side size (32 px) and two pixels at upside and downside vertices. I interested in css tiangles with odd horisontal side and one pixel vertices. – Sergey Beloglazov Jan 13 '20 at 07:29
  • @TemaniAfif, thank you! Something good enough I can see in "CSS3 triangles with transform rotate" answer. It has 1 pixel vertex. But when I zoom it in, I can see it has different gradients on left and right sides. So it's not presise isosceles triangle after rotation. – Sergey Beloglazov Jan 13 '20 at 07:51

1 Answers1

1

I would stretch the triangle using transform by increasing the Y-scale 

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;

  border-top: 20px solid #f00;
  transform: scaleY(1.66);
}
<div class="arrow-down"></div>
Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
  • Thanx, I ran you code as a snipped, and zoomed in the trianle. But it has not equal left and right sides. It's not an isosceles triangle. I can see 2 pixels on the bottom vertex: light red and very light red. I use FireFox 72. – Sergey Beloglazov Jan 13 '20 at 07:32