Как трансформировать фон блока при наведении на элемент меню
Необходимо сделать такой ховер-эффект
Подскажите, чем именно необходимо воспользоваться, что бы при наведении менялся фон, имел такой наклон? И еще мне очень важно знать, как правильно в такой ситуации (используя такой ховер) распологать элементы меню:
display: flex;
justify-content: space-between;
или для каждого пункта меню прописывать свои маргины?
Ответы (1 шт):
Автор решения: humster_spb
→ Ссылка
Воспользуйтесь transform: skew
ul {
display: flex;
list-style: none;
background-color: #87b301;
}
li {
transform: skew(-15deg);
transition: .2s;
}
li a {
display: block;
padding: 10px 15px;
transform: skew(15deg);
text-decoration: none;
color: black;
}
li:hover {
background-color: #ebb713;
}<ul>
<li><a href="#">О компании</a></li>
<li><a href="#">Справочник</a></li>
<li><a href="#">Продукция</a></li>
</ul>