2013-09-25 1 views
3

Недавно я наблюдал, как Крис Койерс говорил о псевдоэлементах и ​​пытался попытаться сделать то же самое.Глядя на использование псевдоэлементов для создания треугольника

Я ищу, чтобы получить эффект от стрелка, указывающая на содержание на правой

Это место литиево, что я хочу предназначаться

.overviews-list > li.active > ul.submenu > li.active 

Вы можете видеть из jsfiddle стиль, который я собираюсь сделать. Я думаю, что css, который нужно изменить, находится на вершине css.

http://jsfiddle.net/T2HuD/1/

ответ

3

Это позволит установить позиционирование и создать вниз стрелку. Номера являются обычными и могут быть отрегулированы для изменения размера стрелки и ее положения.

.overviews-list > li.active > ul.submenu > li.active { 
position:relative; 
} 

.overviews-list > li.active > ul.submenu > li.active:after { 
position:absolute; 
content:""; 
width:0px; 
height:0px; 
border-top: 15px solid white; 
border-right: 15px solid transparent; 
border-bottom: 15px solid transparent; 
border-left: 15px solid transparent; 
top:25%; 
right:10px; 

} 

JS Fiddle

+0

Thats awesome, как я могу получить его, чтобы стрелка указывала вправо? И этот момент находится в конце li, указывающего на контент. Как и здесь: http://trailers.apple.com/trailers/paramount/eagleeye/ –

+0

Играйте с цветом границы, чтобы увидеть, как меняется стрелка. В основном, когда вы хотите, чтобы стрелка указывала, измените сторону OPPOSITE на белый. Итак, указав правильно, вы хотите, чтобы цвет LEFT был белым. Обратите внимание, что вам, возможно, придется играть с номерами позиций, чтобы получить их именно там, где вы хотите, –

+0

Aye удалось получить его благодаря: D –

2

Я делаю это для чего-то другого, но он должен работать для вас тоже ...

.pdfLink:before { 
content:"\25BA"; 
color:#FF0000; 
font-family: Arial,Helvetica,sans-serif; 

}

Все коды я пытался работать. Я не могу вспомнить, как я натолкнулся на этот формат для кода char, но формат очевиден, если вы посмотрите на это char description.

 Смежные вопросы

  • Нет связанных вопросов^_^