Как сделать такой срез как на картинке?
2 ответа
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>
Еще как вариант, использовать 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>