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

Question

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

.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/

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

Answer 1

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

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

Вот краткая схема:

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

Answer 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; 
} 

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

Великий ссылка: How do CSS triangles work?

Answer 3

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

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

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

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

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