0

введите сюда описание изображения

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

2
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете.
    – wchistow
    14 фев в 10:17
  • Не знаю как сделать срез слева и справа 14 фев в 10:17

2 ответа 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>

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.