CSS треугольник стрелка активный элемент меню

Question

CSS треугольник стрелка активный элемент меню

0

Я пытаюсь установить стрелку с помощью "чистого" CSS в меню активных элементов. Проблема, у меня странный вывод. здесь мой FIDDLE. Вы знаете, как его решить?

    #cssmenu li.active a {
   /* display: inline;
    border-bottom: 3px solid #00b8fd;
    float: left;
    margin: 0;*/
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    border-bottom: 10px solid black;
}

user979974 05 май 2014, в 15:37

Источник

1

Это то, что вам нужно - css3shapes.com
Dipak 05 май 2014, в 13:07

Теги:

jquery

html

css

css-shapes

3 ответа

0

div{
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
}

для чистой стрелки css

Arun Krishnan 05 май 2014, в 12:04

0

Эй, Арун, это возможно, чтобы адаптировать ваше решение div с моей структурой меню / jquery?
user979974 05 май 2014, в 13:17

0

Стрелка внизу, как вы просили

position: relative;
top: 60px;

здесь ссылка на скрипку http://jsfiddle.net/suriyag/HwcTn/1/

fidel castro 05 май 2014, в 11:57

0

Хорошо, спасибо за ваш ответ Фидель Кастро
user979974 05 май 2014, в 13:39

Ещё вопросы

Эй, Арун, это возможно, чтобы адаптировать ваше решение div с моей структурой меню / jquery?
Хорошо, спасибо за ваш ответ Фидель Кастро

drew_w · Accepted Answer · 2014-05-05T11-09-00.000Z

Проблема здесь в том, что стрелка будет такой же широкой, как и li которую она описывает. Лучший способ сделать что-то подобное - использовать псевдо-элемент css. То, что вы смотрите, это что-то вроде:

#cssmenu li.active a:before {
    content: ' ';
    width: 0px; 
    height: 10px; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid black;
    display: inline-block;
}

Удачи!

Обновлен скрипт: http://jsfiddle.net/XLfcY/

Привет drew_w, спасибо за ваш пример. Я хотел знать, возможно ли иметь стрелку под элементом вместо верхней?
Я добавил, позиция: абсолютная; внизу: 20px; в конце #cssmenu li.active a: before. Звучит чисто как решение?
Вы можете использовать это или вы можете использовать position:relative вместо - либо работает - зависит только от того, что вы ищете. Результат с относительным: jsfiddle.net/XLfcY/1
супер Drew_w. Большое спасибо за ответ и вашу помощь.