Создание стрелки с: до

Question

Я как бы застрял на этом. Я попытался создать стрелку, которая появится со «Активным» слайдом, и будет использоваться: прежде чем стрелка застрянет в коробке, и я не могу переместить ее за пределы поля и разместить на границе, чтобы она была бесшовной. Что я делаю не так? Я попытался использовать jsfiddle, и, похоже, он работает нормально, поэтому я думаю, что есть проблема с другими элементами слайдера.

.evoslider.default .controlNav li.rotator.active:before 
{ 
width: 0; 
height: 0; 
border-top: 10px solid transparent; 
border-bottom: 10px solid transparent; 
border-right: 10px solid #225985; 
content: " "; 
left: 0px; 
top: 35px; 
z-index: 100000; 
position: absolute; 
} 

Not working example, Working example

Answer 1

Поскольку ваша коробка position: relative на нем, вы можете установить left: -10px на :before стиле

jsfiddle: http://jsfiddle.net/k6c9qam4/3/

Answer 2

Я проверил свой сайт и стрелка не появляется из-за свойства overflow: hidden присвоенный нескольким родительским контейнерам. Пожалуйста, добавьте следующий CSS в нижней части таблицы стилей и что бы решить эту проблему:

li.rotator.active:before { 
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent; 
    border-bottom: 10px solid transparent; 
    border-right: 10px solid #225985; 
    content: " "; 
    left: -11px; 
    top: 35px; 
    z-index: 100000; 
    position: absolute; 
} 

.evoslider.default .controlNav li.rotator { 
    overflow: visible !important; 
} 

.evoslider.default .control_wrapper { 
    overflow: visible !important; 
} 

.evoslider .outer_control { 
    overflow: visible !important; 
} 

Я проверил его с помощью инструментов разработчика, и это работает прекрасно.