JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<ul>
    <li><a href="http://zornet.ru/">Скрипты</a></li>
    <li><a href="http://zornet.ru/">Шаблон</a></li>
    <li><a href="http://zornet.ru/">ZORNET.RU</a></li>
    <li><a href="http://zornet.ru/">Дизайн</a></li>
  </ul>

CSS

li {
    display: inline-block; /* Строчно-блочные элементы */
        background: rgba(27, 25, 25, 0.7); /* Цвет фона */
    margin-right: -5px; /* Расстояние между пунктами меню */
    -webkit-transform: skewX(-29deg); /* Для Safari и Chrome */
    -moz-transform: skewX(-29deg); /* Для Firefox */
    -o-transform: skewX(-29deg); /* Для Opera */
    -ms-transform: skewX(-29deg); /* Для IE */
    transform: skewX(-29deg); /* 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 */
   }
   li:hover {
    background: #333; /* Цвет фона при наведении курсора мыши */
   }