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

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

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

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

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

JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 4 часа назад
- 48 просмотров
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- 19 часов назад
- 63 просмотра
0

ответов
CSS

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

ответ
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 30 просмотров
1

ответ
CSS

Средний
Как сделать сквозную нумерацию неупорядоченных списков?
- 1 подписчик
- 20 дек.
- 67 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 95 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 83 просмотра
1

ответ
HTML

+1 ещё

Простой
Как с помощью регулярного выражения найти все теги?
- 1 подписчик
- 19 дек.
- 85 просмотров
2

ответа
HTML

+1 ещё

Простой
Можно ли задать стили внешнему тегу на основе вложенного?
- 1 подписчик
- 18 дек.
- 103 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать универсальную HTML-ссылку на яндекс карты?
- 1 подписчик
- 17 дек.
- 250 просмотров
0

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

CRM Bitrix24 разработчик

World Vision Clinic • Москва

от 170 000 ₽

Разработать дизайн приложений

22 дек. 2024, в 19:03

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

Веб-дизайн клининговой компании

22 дек. 2024, в 17:54

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

Нарисовать UX/UI дизайн для игры. Нарисовать несколько иконок для игры

22 дек. 2024, в 17:45

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

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

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

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

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

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