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

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

Простой
Как сделать так, чтобы при наведении на один объект, меняется другой, с помощью hover?
- 1 подписчик
- 2 часа назад
- 33 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- 2 часа назад
- 52 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Почему вылезает второй слайд?
- 1 подписчик
- 3 часа назад
- 30 просмотров
1

ответ
JavaScript

+3 ещё

Средний
Какие есть способы организовать редкое добавление статей на сайт?
- 1 подписчик
- 22 часа назад
- 107 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как сделать авто подтверждение?
- 2 подписчика
- вчера
- 138 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как реализовать анимацию текста при выходе за границу блока?
- 2 подписчика
- вчера
- 110 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему не работает ссылка в HTML?
- 2 подписчика
- вчера
- 132 просмотра
1

ответ
CSS

Простой
Как зафиксировать блок с позиционированием от родительского контейнера?
- 2 подписчика
- 16 апр.
- 120 просмотров
1

ответ
HTML

Простой
Почему не подключается спрайт SVG?
- 1 подписчик
- 16 апр.
- 71 просмотр
0

ответов
JavaScript

+1 ещё

Простой
Как определить величину перекоса transform skew?
- 1 подписчик
- 15 апр.
- 64 просмотра
1

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

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Фронтенд и скрипты мобильного приложения на Flutter или ReactNative

18 апр. 2024, в 13:47

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

Обучение команды разработчиков по направлению Kafka Срок - 1 месяц

18 апр. 2024, в 13:46

3000 руб./в час

Техническая оценка специалиста по разработке на React Native

18 апр. 2024, в 13:40

1500 руб./в час

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 комментария

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

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

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

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