Как сделать такой элемент меню?

Question

Как сделать такой элемент меню?

Рейтинг: 0Ответов: 2Опубликовано: 14.02.2023

Как сделать такой срез как на картинке?

css html

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Еще как вариант, использовать clip-path

Пример

.menu-link {  
  color: #fff;
  background-color: #000;
  display: inline-block;
  padding: 1em 2em;
  clip-path: polygon(1em 0, 100% 0, calc(100% - 1em) 100%, 0 100%);
  text-decoration: none;
}

.menu-link:hover,
.menu-link:focus,
.menu-link:active {
  background-color: #00f;
}

<a href="#" class="menu-link">Категория</a>

Answer 2

▲ 1

div {
  background-color: black;
  color: white;
  display: inline-block;
  padding: 1em 2em;
  transform: skewX(160deg);
}
span {
  display: inline-block;
  transform: skewX(-160deg);
}

<div>
  <span>Категория</span>
</div>

Как сделать такой элемент меню?

Ответы