Как создать стрелку, используя только CSS?

Я видел следующий пример:

.arrow {
   height: 0;
   width: 0;
   border: 4px solid transparent;
}
.arrow.up {
   border-bottom-color: #000;
}
.arrow.down {
   border-top-color: #000;
}

http://jsfiddle.net/FrsGR/

Однако я не могу понять, как он создает стрелки. Может кто-нибудь объяснить это мне?

Ответ 1

Я раньше не знал этого трюка, но я думаю, что понимаю. Нижняя граница не квадратная, она скошена по бокам. Левая граница будет скошена сверху и снизу. Это значит, что границы разных цветов соответствуют чистоте. Поскольку элемент стрелки имеет высоту и ширину 0, пограничный сегмент имеет ширину внизу, как указано в правиле границы, но сужается до ширины 0px (размер контейнера).

Вы можете играть с эффектом, устанавливая разные толщины границ или изменяя "сторону" правила границы. "Стрелка" всегда указывает противоположность направления, установленного в правиле. Нижняя граница "указывает" вверх; правая граница "указывает" налево.

Вот краткая диаграмма:

Слева - трюк стрелки. Правая - более типичная граница, где контейнер имеет некоторые размеры.

Ответ 2

Возьмите коробку. Скажем, 5 пикселей в высоту и 5 пикселей в ширину. Теперь скажите, что у него граница 4px. Вот что вам следует представить: http://jsfiddle.net/FrsGR/190.

.arrow { // box
   height: 5px;
   width: 5px;
   border: 4px solid blue;
}

Теперь представьте, что поле не имеет ширины или высоты, поэтому вы просто остаетесь с границами: http://jsfiddle.net/FrsGR/885/.

.arrow { // box with no width/height
   height: 0;
   width: 0;
   border: 4px solid blue;
}

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

Отличная ссылка: Как работают треугольники CSS?

Ответ 3

CSS создает границу вокруг точки (без ширины/высоты, но некоторой координаты x, y) с размером 4px, как указано в .arrow. Это похоже на создание круга с радиусом 4px, кроме как из-за характера границ CSS, "круг" на самом деле представляет собой квадрат.

Вы можете увидеть все четыре quandrants квадрата радиуса 4px следующим образом:

.arrow.up {
    border-top-color:blue;
    border-right-color:green;
    border-left-color:red;
   border-bottom-color: #000;
}

Здесь показан увеличенный пример с использованием размера 40 пикселей вместо 4px:

http://jsfiddle.net/dqB32/1/