If arrows appear in a design, you should check whether they can be displayed without graphics. The following technique may save you some HTTP requests and thus increase the performance of the website. The trick is not new. Therefore I would like to spread this useful technique with additional information.
technology
The basic technique uses the frame property of elements: border. In addition, the arrow is generated over a pseudo element to avoid additional mark-up.
Example 1 – Theory
CSS
[prism field=css-arrow-example-1-css language=css class=line-numbers]
This technique takes advantage of the rendering of the border property by the browsers. The vertices of the border sides are mitered together to create four triangles at an element size of 0 × 0 pixels. The size of the pseudo element is therefore determined solely by the frame thickness (see example 1: height = 2 × border-width = 6 rem).
 
Example 2 – Practice
any element
HTML
[prism field=css-arrow-example-2-html language=markup class=line-numbers]
CSS
[prism field=css-arrow-example-2-css language=css class=line-numbers data_line=17.19]
In the second example, the arrow was reduced in size and repositioned. The width of the element has been adjusted to the content using the display type inline block. The new inner distance creates space for the arrow on the right side. Often you will only need one frame page in the desired color, the rest should therefore be transparent.
Tip: The arrow object can be limited to its actual size by setting the width of the opposite page to zero (see CSS – line 17). This makes positioning a bit easier.
Vertical centering is also solved using a standard technique. The absolute positioned object is first aligned with its top edge at the center of the reference element and then moved upwards by half its height with a negative outside distance.
Rendering in Firefox
In some versions of the Mozilla Firefox browser the arrows are displayed with very hard or frayed edges, which looks like a display error. To work around this behavior, the arrow element can be scaled invisibly (see CSS – line 19). Brett Hoffman has taken the trouble to list more possible workarounds for this problem.
other forms
The shape of the arrow can be controlled quite precisely by means of corresponding frame widths for the individual four sides. For a “corner”, for example, two frame sides can also be used together.
Example 3 – corner
CSS
[prism field=css-arrow-example-3-css language=css class=line-numbers]
Example 4 – Arrows with legs
In a modified form, another form can be produced, which is seen more often. The pseudo element does not necessarily have to have the size zero, but the frames can also be used directly as legs for the arrow.
CSS
[prism field=css-arrow-example-4-css language=css class=line-numbers]
Important: The above method only works in browsers that support the CSS3 property transform (with prefix if necessary) .
other benefits
The arrows generated in this way can of course also be used in combination with other elements. So it is not surprising that this technique is very popular for creating speech bubbles. cssarrowplease provides a practical generator for this purpose.
be careful with shadow effects and patterned backgrounds
The box-shadow property does not work on the arrows presented here, because the shadow is always applied to the entire box. Likewise, the arrow can only take on a solid color and not a graphic pattern or gradient. This may be relevant for the speech bubble technique.
summary
You have to keep in mind that this technique is ultimately a CSS hack that exploits browser behavior. Fortunately, all browsers behave largely the same. But if the manufacturers ever get the idea to change the rendering of frames, the arrows might not look like arrows anymore.
Whether the technology can be used depends on the context and design in which the arrows are to be used. Basically, I would always prefer these arrows to graphics if they show the same thing without restrictions.
Comments