CSS реализует полый треугольник, указывающий стрелку

внешний интерфейс SVG CSS

Эта статья была впервые опубликована вyoowin.me, Добро пожаловать в гости!

В веб-разработке ежедневное применение треугольников является наиболее распространенным использованием треугольников для обозначения стрелок. Это очень просто реализовать с помощью CSS. После знакомства с ним это будет лучший и более гибкий выбор, чем использование SVG или фоновых изображений. .

Вообще говоря, треугольные стрелки делятся на два типа, одни визуально без границ, которые мы называем сплошными треугольниками, другие визуально с границами, причем часть треугольных стрелок без границ должна быть связана с основным элементом. то же самое, мы называем его полым треугольником.

两种三角箭头
две треугольные стрелки

Ближе к дому поговорим о том, как добиться.

Прежде всего, давайте поговорим о принципе реализации треугольника. Знакомые студенты могут пропустить этот шаг.

Принцип реализации треугольника

Принцип реализации треугольника заключается в том, что ни ширина, ни высота не заданы (то есть 0), а задана только граница.Если все четыре границы заданы шириной (border-width), стилем (border-style) и цвет (border-color), эффект показан на рисунке. :

Вышеуказанный эффект, когда ширина границы четырех границ одинакова На самом деле, ширина границы может быть изменена в соответствии с потребностями, как показано на следующем рисунке:

Все, что вы видите выше, это четыре треугольника.На самом деле, если вы хотите получить один треугольник, вам нужно только установить прозрачный цвет границы трех других треугольников (вам все еще нужно учитывать IE6 в 2017 году).

Это завершает треугольник.

сплошная треугольная стрелка

Принцип сплошных треугольников заключается в том, что треугольник абсолютно расположен на границе основного элемента и соединен.

Для семантики мы используем одиночные метки, а треугольники реализуются с помощью псевдоклассов.

Просто измените цвет треугольника на цвет фона, соответствующий основному элементу. Как показано ниже:

полая треугольная стрелка

Принцип полого треугольника заключается в том, что треугольник с цветом границы абсолютно позиционируется на границе основного элемента и соединяется, а затем другой треугольник с цветом фона основного элемента абсолютно позиционируется и закрывается поверх первого треугольника. , Ключевым моментом является то, что второй треугольник такой же, как и первый.Смещение расстояния от положения первого треугольника должно быть равно ширине границы.

Может и неясно, но понятнее будет посмотреть на рендерах (чтобы различать дисплей, первый треугольник розовый, а второй белый)

Измените цвет первого треугольника на цвет границы, а цвет второго треугольника на цвет фона.

Для семантики мы используем один тег, а два треугольника реализуются с помощью псевдоклассов до и после.Поскольку псевдоэлемент после переопределяет псевдоэлемент до, псевдоэлемент после является вторым треугольником.

Расстояние смещения для позиционирования второго треугольника

Это то, что легко не заметить!

Для визуальных эффектов и взаимодействия с пользователем мы должны оставить ширину границы треугольной стрелки такой же, как ширина границы основного элемента.

Как правило, некоторые учащиеся могут подумать, что значение смещения второго треугольника такое же, как ширина границы основного элемента, что на самом деле неверно.

Значение смещения второго треугольника по сравнению с первым треугольником должно быть в 2 раза больше ширины рамки основного элемента, что составляет около 1,414, что для удобства можно рассчитать как 1,4 раза.

На следующем рисунке показана схема:

勾股定理
Теорема Пифагора

Предполагая, что ширина границы элемента body составляет 6 пикселей, смещение второго треугольника от первого треугольника должно быть 6 пикселей * 1,4 = 8,4 пикселей.

онлайн демо

прикрепленный код

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>空心三角形指示箭头</title>
    <style>
        .box {
            position: relative;
            width: 300px;
            height: 100px;
            border: 6px solid #555;
            border-radius: 20px;
            margin: 100px auto;
            background-color: #8a98ff;
        }

        /*第一个三角形*/
        .box::before{  /*这里的伪元素用单冒号和双冒号都一样*/
            content: '';
            display: block;
            position: absolute;
            top: -26px;
            left: 80px;
            border-left: 20px solid transparent ;
            border-right: 20px solid transparent;
            border-bottom: 20px solid #555;
        }

        /*第二个三角形*/
        .box::after{
            content: '';
            display: block;
            position: absolute;
            top: -17.6px; /*向下偏移量是矩形边框宽度的1.4（根号2）倍，即8.4，top值为-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>
Категории