JSFiddle - React, Tailwind, and code Playground

by Danja Wittmann

HTML

<ul>
    <li><a href="1.html">Джокер</a></li>
    <li><a href="2.html">Пазузу</a></li>
    <li><a href="3.html">Палпатин</a></li>
    <li><a href="4.html">Доктор Дум</a></li>
  </ul>

CSS

li {
      position: relative;
    border: 1px solid black;
    display: inline-block; /* Строчно-блочные элементы */
    background: #CA181A; /* Цвет фона */
    -webkit-transform: skewX(-30deg); /* Для Safari и Chrome */
    -moz-transform: skewX(-30deg); /* Для Firefox */
    -o-transform: skewX(-30deg); /* Для Opera */
    -ms-transform: skewX(-30deg); /* Для IE */
    transform: skewX(-30deg); /* CSS3 */
   }
   a {
    color: #fff; /* Цвет ссылок */
    display: block; /* Блочный элемент */
    padding: 5px 15px; /* Поля вокруг текста */
    text-decoration: none; /* Убираем подчёркивание */
    -webkit-transform: skewX(30deg); /* Для Safari и Chrome */
    -moz-transform: skewX(30deg); /* Для Firefox */
    -o-transform: skewX(30deg); /* Для Opera */
    -ms-transform: skewX(30deg); /* Для IE */
    transform: skewX(30deg); /* CSS3 */
   }