<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>

li {
  display: inline-block; /* Строчно-блочные элементы */
  background:rgba(118,118,118,0.7); /* Цвет фона */
  margin-right: -5px; /* Расстояние между пунктами меню */
  -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 */
  }
  li:hover {
  background: #333; /* Цвет фона при наведении курсора мыши */
  }