Very often modern beautiful web pages contain many attractive graphic elements. Among them is used such a simple geometric figure as a triangle, which is used to design many elements. For example, I use them as a pointer to a certain object on the page so that the site visitor turns his attention to it. Of course, the main function of the triangle is decorative, since the blocks containing them become more modern and attractive.
Not everyone knows how to create such shapes using cascading style sheets, and are wondering how to make a triangle in CSS.
Application in the design of sites
In web design, triangles are everywhere. They draw up tips, menus, all kinds of user interface elements. Sometimes they are used when creating an indicator of the loading process. And if earlier it was possible to do without them, then now it is impossible, and developers are obliged to adapt to such requirements. Indeed, today the triangle created in CSS is the most important part in building the mutual relationship between the parts of the interface and combining it into a single whole.
Many typesetters are perplexed when they get a layout, in the design of which triangles are very often. After all, there are no properties that would directly create this geometric shape. In fact, several methods are available to do this.
The way to create using the frame
The first method to create a triangle in CSS is border. It consists in using a framework. Despite the fact that the borders that are created using the border property are not directly related to the triangle, it is it that is most often used for this purpose.
When setting the object’s height and width to zero, as well as setting a thick border, you can see a square that consists of four equal triangles. The trick is to leave only the necessary border, and make the rest transparent. And so, the triangle drawn in CSS of the necessary direction and color turns out.
It is convenient to create corners using the “frame” property, because there is no need to draw a picture using any kind of graphic editor. The parameters of the triangle can always be changed in the code. It also saves the developer time. By combining various frame widths, it is easy enough to get a figure. To understand how this works, you can simply create an empty element with zero width, height and a very thick border of various colors on each side. So, making three sides of four transparent, get triangles of different types:
- a triangle looking to the left, whose sides are equal;
- a triangle looking to the left and flattened;
- an elongated triangle looking to the left;
- a right triangle with a right angle to the left;
- triangle looking down;
- triangle looking up;
- a triangle looking to the right and many other varieties.
Using pseudo-elements
Using these techniques, you can create corners for tooltips and tooltips. In order to attach a triangle to a block via CSS, most often programmers use pseudo-elements such as after and before. If you use them together, you can draw a triangle in CSS that has a stroke.
By combining them, developers create many beautiful arrows by applying the position: relative property to the parent element. This is done so that the pseudo-elements do not move out of place.
The benefits of using a CSS frame to create triangles are:
- quick and easy editing of size and color using properties;
- support by all browsers.
Minuses:
- since frames are used, there is no way to apply gradients, shadows;
- sometimes, when the user views the pages in the Firefox browser, the transparency value may not work, and this will distort the picture.
Using the finished picture
The next method to create triangles is to use a coded picture. The triangle is drawn in advance in a graphical editor and converted into a special code using specialized services.
The advantage of this method is that you can make a very beautiful design with shadows, gradients and frames, and then just code it all. And the disadvantages include the fact that not everyone is good at graphic programs. In addition, if the image is very large, then the line of code is simply huge. This is inconvenient for the developer.
A separate point is the use of browsers Internert Explorer of older versions. In them, this method simply will not work.
Inverted Square Method
One way is to create an inverted square using CSS. Two blocks are needed here. But some use pseudo-elements.
First, a square is created. It will be the contents of the rotated element. Then it is turned 45 degrees to make it look like a diamond. Then an upward shift is made, and the external block is hidden using the overflow: hidden property. This solution is also not cross-browser, and sometimes the picture will not be displayed as we would like.
Summary
So, there are many methods for creating a triangle. Just how not to get lost in all these CSS properties? The directory in this case will always help out. It describes all the properties of cascading style sheets.
For those who do not want to go into programming and view the CSS reference, there are online editors that generate triangles of the desired size and color. In the visual editor, the user selects and configures all the parameters of the figure. The triangle converted to CSS code generates a generator in a separate window right on the fly. Then the generated code is simply inserted into the stylesheet and adjusted to the page design.