css стрелочка для меню after

17.06.2016

Простой способ добавить маркер "стрелочку" к пунктам меню.

В примере ниже просто покажу, как нарисовать треугольник на чистом CSS и немного его анимировать.

Начну сразу с примера:

Ссылка 

 
<div class="wrapper">
    <a href="#">Ссылка</a>
</div>


 
.wrapper a {
    text-align: right;
    position: relative;
    font-size: 60px;
}

.wrapper a:before {
    position: absolute;
    top: 9px;
    right: 0px;
    content: "";
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 60px solid white;
    transition: all 0.5s ease 0s;
    transform: translate(100%, 0);
}

.wrapper:hover a:before {
    transform: translate(100%, -10%);
}

Категории: Web, HTML, CSS
Пометки: css стрелочка для меню
Яндекс.Метрика