This article was first published in yoowin.me, welcome to visit!

In Web development, the daily application of triangle is the most common triangle indicating arrow. It is very simple to achieve with CSS. After being familiar with it, it will be a better and more flexible choice than introducing SVG or background images.

And triangle arrows, in general, are divided into two types, the ones that have no visual border, which we call solid triangles; The other is the one that visually has a border, where the triangular arrow cuts off the border to match the background color of the main element. We call this a hollow triangle.

Two kinds of triangular arrows

So let’s talk about how we did that.

First of all, let’s talk about how triangles are implemented, and you can skip this step if you’re familiar with it.

Realization principle of triangle

The implementation principle of triangle is not set to width and height (i.e. 0), only set to border, if all four borders are set to width, style and color, the effect is shown in the following figure:

< span style = “max-width: 100%; clear: both; min-height: 1em;

You can set the border color of the other three triangles to transparent (IE6, 2017).

So that’s the triangle.

Solid triangular arrow

The principle of solid triangles is that a triangle is absolutely positioned at the boundary of the body element and connected.

For semantically, we use single tags and triangles are implemented using pseudo-classes.

Replace the triangle color with a background color that matches the body element. The diagram below:

Hollow triangular arrow

Hollow triangle principle is a border color absolutely positioned elements border and connected to the subject, and then another main body element background color of the triangle absolute positioning and cover to the first, the key point is the second triangle compared to the first position on the offset distance should be equal to the border width.

This may be a little cryptic, but it will be clearer when you look at the renderings (the first triangle is pink, the second is white for the sake of display).

Change the first triangle color to the border color and the second triangle color to the background color.

For semantic purposes, we use a single tag, and the two triangles are implemented with before and after pseudo-classes, because the after pseudo-element overwrites the before pseudo-element, so the after pseudo-element is the second triangle.

The offset distance of the second triangle

This is an easy one to overlook!

For visual and user experience purposes, the border width of the triangle arrow should be the same as the border width of the body element.

You might think that the offset of the second triangle is the same as the border width of the body element, which is not true.

The offset of the second triangle relative to the first triangle should actually be “square root 2” of the border width of the body element, which is about 1.414, or 1.4 for convenience.

Here is the schematic diagram:

The Pythagorean theorem

Assuming that the border width of the body element is 6px, the offset of the second triangle relative to the first triangle should be 6px*1.4 = 8.4px

The online demo

The attached code


      
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Hollow triangles indicate arrows</title>
    <style>
        .box {
            position: relative;
            width: 300px;
            height: 100px;
            border: 6px solid # 555;
            border-radius: 20px;
            margin: 100px auto;
            background-color: #8a98ff;
        }

        /* First triangle */
        .box::before{  /* The single colon and double colon are the same for pseudo-elements */
            content: ' ';
            display: block;
            position: absolute;
            top: -26px;
            left: 80px;
            border-left: 20px solid transparent ;
            border-right: 20px solid transparent;
            border-bottom: 20px solid # 555;
        }

        /* Second triangle */
        .box::after{
            content: ' ';
            display: block;
            position: absolute;
            top: -17.6 px.; /* The downward offset is 1.4 (square root of 2) times the width of the rectangle's border, i.e. 8.4, with a top value of -26- (-8.4) */
            left: 80px;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 20px solid #8a98ff;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>Copy the code