As I recalled the school geometry course

How often did you have to solve a differential equation or find an integral after graduation? I think, infrequently, of course, if you are not a scientist. But there are disciplines, theoretical knowledge on which can suddenly come in handy in our work, even if this work is not directly related to science. One of these disciplines is geometry.

In this article I want to talk about the problem, which helped me to solve geometric formulas. And since I am engaged in the development of interfaces, then it will be a question of the layout of such a pop-up message.

At first glance, nothing complicated. Quickly throw in the main styles, add rounds and shadows, and make a pointer in the form of a triangle, using a pseudo-element and a well-known technique . Check the result:

→ http://codepen.io/belyan/pen/vymwXe

Everything is good, only a triangle should also be with a shadow. But if we add a shadow to our pseudo-element, it will not work: the shadow will be square.

It turns out that this method is only suitable for creating simple triangles, without shadow and stroke.

Let's try to use another, slightly less well-known technique for creating triangles in CSS. Again, use the boarders, just make a triangle in the upper left corner, add a shadow to the element and shift it to the same angle using negative values. Now turn the element 45 degrees clockwise and get a triangle with a shadow.

→ http://codepen.io/belyan/pen/ObmYQa

The result looks better, but not perfect. If you look closely, you can see that the triangle on the layout is slightly lower than ours. And we can not fix it, because our triangle will always remain rectangular . We can add a rounding to it, and even emulate a stroke using the inner shadow, but we cannot change the value of the upper corner.

To create a non- right triangle, we will use a more complicated method. Its essence is that we create a square, rotate it 45 degrees and tilt it to the desired angle to get a diamond, and then hide its bottom. As a result, we obtain an isosceles triangle of any size, with which we can add shadow, border, and rounding.

The difficulty lies in the fact that you have to manually select the size of the square and the angle of inclination, until we achieve the desired type. Therefore, many of this method and do not use. So let's write a mixin that will do all the calculations for us!

We write mixin

Further I will use the LESS preprocessor, but this mixin can be easily rewritten on SCSS.

Take as an illustration this triangle and set its initial parameters as the initial parameters - the base b and the height h .

We start the calculations by finding the side a . Since the height of an isosceles triangle divides its base in half, the lateral side of a can be found by the Pythagorean theorem :

 @base: 100px; @height: 100px; @side: sqrt(@base * @base / 4 + @height * @height); //  , ,   ;) 

Knowing the values ​​of all sides, we can find the alpha side angle. We recall that the sine of the angle is the ratio of the opposite leg to the hypotenuse. The opposite leg is h , and the hypotenuse is a . In this way:

 @alpha: asin(@height / @side); //    ! 

Now it is necessary to calculate the angle of inclination for the transformation of our square after a rotation of 45 degrees. To do this, draw a right triangle whose base coincides with ours.

Now you can clearly see that the angle of inclination beta will be equal to the difference between the lateral angle alpha and the angle of rotation.

 @beta: convert(@alpha, deg) - 45deg; //        

The last value that we need to calculate is the side of the square before its transformation. For this we use the cosine of the angle . The tilt angle is known to us, and the adjacent leg will be side a . Thus, the side can be calculated by the formula:

 @size: @side * cos(@beta); 

Now we know the initial dimensions of the square, as well as the angles of rotation and inclination, to transform it into a rhombus. Add the necessary styles and hide the bottom half of the rhombus using overflow: hidden , as a result we get an isosceles triangle of the specified sizes. Mixin ready.

→ http://codepen.io/belyan/pen/wozWXE

We apply it to our pop-up message and finally we get the desired result. :)

→ http://codepen.io/belyan/pen/LbyKEd

I want to add that with the help of the same mixin we can create equilateral triangles, since they are a special case of the isosceles. In this case, we only need to specify the base of the triangle, and its height can be easily calculated by the formula:
@height: @base * sin(60deg); .

You can also add to your mixin the ability to set the direction of the vertex of the triangle: top , left , right , bottom . I did not do this in the article, since the amount of code would increase significantly. For those who are interested in this topic, I suggest to look at the extended version of this mixin. There you will also find mixins for other geometric shapes, such as a circle, an oval, a cross, a star, etc.

→ http://codepen.io/belyan/pen/Lpqdmx

I hope you were interested. Thanks for attention!