Как сделать такое меню и что бы шрифт не был курсивным?

Question

Cook1eMonsta @Cook1eMonsta

HTML
CSS

Как сделать такое меню и что бы шрифт не был курсивным?

Как сделать такое меню, и что бы шрифт не был курсивным.

Вопрос задан более трёх лет назад
63 просмотра

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 2

Комментировать

4 комментария

Cook1eMonsta @Cook1eMonsta Автор вопроса

Можно сделать что бы блок был кликабелен ?

Написано более трёх лет назад

Икотий Айтишевич @ikoit

Cook1eMonsta,

ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  position: relative;
  margin: 0 5px;
  width: 150px;
  height: 40px;
  text-align: center;
  color: white;
}

li:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
	-webkit-transform: skew(-20deg);
	   -moz-transform: skew(-20deg);
	     -o-transform: skew(-20deg);
	background: black;
}

a {
    position: relative;
    z-index: 9999;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    font-weight: normal;
    color: white;
    text-decoration: unset;
}

Написано более трёх лет назад

Икотий Айтишевич @ikoit

Или можно ещё так:

ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  position: relative;
  margin: 0 5px;
  width: 150px;
  height: 40px;
	-webkit-transform: skew(-20deg);
	   -moz-transform: skew(-20deg);
	     -o-transform: skew(-20deg);
  background: black;
  text-align: center;
  color: white;
}

a {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    color: white;
    text-decoration: unset;
	-webkit-transform: skew(20deg);
	   -moz-transform: skew(20deg);
	     -o-transform: skew(20deg);
}

Написано более трёх лет назад

Cook1eMonsta @Cook1eMonsta Автор вопроса

Спасибо

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

3 комментария

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 7 часов назад
- 30 просмотров
1

ответ
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 10 часов назад
- 25 просмотров
0

ответов
HTML

Простой
Как на html реализовать блоки «Внимание / Важно»?
- 1 подписчик
- 10 часов назад
- 85 просмотров
0

ответов
HTML

+1 ещё

Простой
Как разместить елементы с разных блоков чтобы они перекрывали друг друга?
- 1 подписчик
- 13 часов назад
- 43 просмотра
1

ответ
CSS

Простой
Как сделать border со смещением?
- 1 подписчик
- вчера
- 94 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- вчера
- 74 просмотра
1

ответ
HTML

+1 ещё

Простой
Flex и position: sticky, почему не работает?
- 1 подписчик
- 19 нояб.
- 69 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как построить код, чтобы гугл таблица на сайте выдавала только значение из конкретной ячейки?
- 1 подписчик
- 19 нояб.
- 39 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Как выделить мышкой область на странице и присвоить класс элементам попавшим в эту область?
- 1 подписчик
- 19 нояб.
- 101 просмотр
1

ответ
JavaScript

+3 ещё

Средний
Как сделать слайдер на swiper, в котором активный слайд всегда крайний слева?
- 1 подписчик
- 19 нояб.
- 110 просмотров
1

ответ
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Перерисовать логотип в векторе

22 нояб. 2024, в 00:55

500 руб./за проект

Разработка алгоритма на python (Data engineering)

21 нояб. 2024, в 23:30

300000 руб./за проект

Верстка Flutter + API

21 нояб. 2024, в 22:21

3000 руб./в час

Answer 1 · 2021-08-26 13:16:57

Минутка гадания на кофейной гуще.
Судя по всему, меню сделано через transform: skew, и текст внутри не курсивом, а просто наклонён.
Тогда добавьте тексту transform: skew на тот же угол, но в обратную сторону:

Answer 2 · 2021-08-26 13:17:20

На скорую руку так:
HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Пункт 1</a></li>
      <li><a href="#">Пункт 2</a></li>
      <li><a href="#">Пункт 3</a></li>
      <li><a href="#">Пункт 4</a></li>
      <li><a href="#">Пункт 5</a></li>
    </ul>
  </nav>
</body>
</html>

CSS

ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  position: relative;
  margin: 0 5px;
  padding: 10px;
  width: 150px;
  text-align: center;
  color: white;
}

li:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
	-webkit-transform: skew(-20deg);
	   -moz-transform: skew(-20deg);
	     -o-transform: skew(-20deg);
	background: black;
}

a {
  position: relative;
  z-index: 9999;
  font-weight: normal;
  text-decoration: unset;
  color: white;
}

Answer 3 · 2021-08-26 13:09:16

Максим Комаров @qwnofear

font-weight: normal;

Ответ написан более трёх лет назад

3 комментария

Как сделать такое меню и что бы шрифт не был курсивным?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт