Как я могу создать стрелку, используя только 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/

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


css geometry css-shapes
person Community    schedule 27.08.2013    source источник
comment
Поскольку изображение не имеет размера (ширины/высоты), то, что вы видите, это только граница... Граница имеет ширину 4 пикселя и может быть разделена на 4 части (также называемые треугольниками)... сверху, снизу, слева, справа   -  person jlewkovich    schedule 27.08.2013
comment
Несколько сложно объяснить, но границы есть со всех 4-х сторон и накладываются друг на друга. Изобразите квадрат со знаком X через... каждый срез представляет собой рамку... боковые (прозрачные) границы перекрывают черную рамку сверху или снизу и, таким образом, создают вид стрелки. Надеюсь, это поможет немного объяснить. Дайте мне знать, если вам нужны разъяснения   -  person Sean Thompson    schedule 27.08.2013
comment
гм... Я модифицировал твою скрипку, в этой скрипке, я думаю, ты это ясно видишь. jsfiddle.net/FrsGR/193   -  person Bigxiang    schedule 27.08.2013
comment
@JL Напиши это как ответ.   -  person Shomz    schedule 27.08.2013
comment
На него уже был дан ответ, но вот анимированная версия: jsfiddle.net/xq8Ce   -  person thgaskell    schedule 27.08.2013

Ответы (3)


arrow_upward
29
arrow_downward

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

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

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

введите здесь описание изображения

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

person Surreal Dreams    schedule 27.08.2013

arrow_upward
4
arrow_downward

Возьми коробку. Скажем, это 5 пикселей в высоту и 5 пикселей в ширину. Теперь скажем, что у него есть граница в 4 пикселя. Вот что вы должны себе представить: 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?

person Anthony    schedule 27.08.2013
comment
Это очень хорошая ссылка. Рад видеть, что я понимаю, как это работает :) - person Surreal Dreams; 27.08.2013

arrow_upward
0
arrow_downward

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

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

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

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

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

person DrewP84    schedule 27.08.2013