Горизонтальное меню с косыми линиями

@Dzvene · Регистрация: 27.09.2013

Студворк — интернет-сервис помощи студентам

Подскажите как лучше сделать горизонтальное меню с косыми линиями:

Сделал спрайтами, но надо чтобы пункты меню тянулись, поэтому спрайты не прошли:

Может кто-то сталкивался с таким?

@zme9 · 15.03.2014, 13:42

Параллелограмм вот сама фигура. Просто адаптируйте её под себя и всё.

CSS
1
2
3
4
5
6
7
8
#parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
    background: red;
}

@Dzvene · 15.03.2014, 14:01 **[ТС]**

Дело в том что первый и последний элемент имеют один прямой угол

@zme9 · 15.03.2014, 14:05

А если сделать его чуть больше , а общему блоку задать overflow:hidden; ?

@Dzvene · 15.03.2014, 14:12 **[ТС]**

http://codepen.io/Dzvene/pen/ruilt

Тогда с правым краем возникает проблема

@fol · 15.03.2014, 15:21

можно фон для li задать 3-мя картинками:
Название: 1.jpg
Просмотров: 185

Размер: 1,012 байт

Название: 2.jpg
Просмотров: 184

Размер: 638 байт

Название: 3.jpg
Просмотров: 184

Размер: 1,002 байт

для вертикальной черты в 1px repeat-x

ну, только png-шками, естессно, не джпегом

@monochromer · 15.03.2014, 15:35

... или использовать псевдо-элементы и border-треугольники.

@Dzvene · 15.03.2014, 20:51 **[ТС]**

А вы можете показать примерный код, как это будет выглядеть?)

@newJS · 15.03.2014, 21:35

это немного другое, но все же
сложное меню

@Dzvene · 15.03.2014, 21:40 **[ТС]**

Дело в том что можно тремя картинками сделать, но есть одно "но", они должны заезжать друг под друга(ведь у них скос). Я уже много чего перепробовал, ума не приложу как это сделать

@newJS · 15.03.2014, 21:58

в залежах нашел такое, может получится завтра переделать под косяк
а тут хитрость, носик и хвостик треугольные, а не прямоугольные, как все делают

@monochromer · 15.03.2014, 23:11

Сообщение от Dzvene

А вы можете показать примерный код, как это будет выглядеть?)

Пример - http://jsbin.com/kuraw/1/edit?html,css,output
Правда приходится немного вычислять всякие размеры.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 
  <nav>
    <a href="#777">Main</a>
    <a href="#777">SML</a>
    <a href="#777">F#</a>
    <a href="#777">OCaml</a>    
  </nav>
  
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
html{    
  font-family: "Open Sans", sans-serif;
}
 
nav{
  display: block;
  width: 560px;
  background: #434343;
}
nav::after{
  content:'';
  display: table;
  clear:both;
}
 
nav a{
  display: block;
  float:left;  
  padding: 0 25px;
  margin: 0 16px;
  
  position: relative;
  
  height: 32px;
  line-height: 32px;
  text-align:center;
  text-decoration: none;
  font-size: 16px;
  
  color:#f2f2f2;  
  /* outline: 1px solid #00a4f4; */
}
 
nav a::before, nav a::after{
  content:'';
  /* display: block; */
  position: absolute;
  bottom:0;
  border: 16px solid transparent;
  display: none;
}
 
nav a::before{
  left:-32px;    
  border-right: 16px solid #00a4f4; 
  border-bottom: 16px solid #00a4f4;
}
 
nav a::after{
  right:-32px;
  border-left: 16px solid #00a4f4; 
  border-top: 16px solid #00a4f4;
}
 
nav a:hover{
  background: #00a4f4;
}
nav a:hover::before, nav a:hover::after{
  display: block;
}
 
nav a:first-child{
  margin-left: 0;
}
nav a:first-child::before,
nav a:last-child::after{
  display: none;
  visibility: hidden;
  opacity: 0;
}

@Dzvene · 16.03.2014, 00:29 **[ТС]**

http://jsfiddle.net/dzvene/HRWqq/207/

Неприятность добавляет серый бордер, думаю может его backgraundom сделать. Думаю реализация такого меню сможет кому-то еще пригодится

Добавлено через 14 минут
http://jsfiddle.net/dzvene/HRWqq/209/

HTML5
1
2
3
4
5
<nav>
    <a href="#777">Who We Are & Our Values</a>
    <a href="#777">Our History</a>
    <a href="#777">Our Leadership</a>  
 </nav>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
nav{
  display: block;  
  background: #fff;
  color: #ccc;
}
nav::after{
  content:'';
  display: table;
  clear:both;
}
 
nav a{
  display: block;
  float:left;  
  padding: 0 25px;
  margin: 0 16px;
  
  position: relative;
  
  height: 32px;
  line-height: 32px;
  text-align:center;
  text-decoration: none;
  font-size: 16px;
  
  color:#555555;  
  /* outline: 1px solid #00a4f4; */
}
 
nav a::before, nav a::after{
  content:'';
  /* display: block; */
  position: absolute;
  bottom:0;
  border: 16px solid transparent;
  display: none;
}
 
nav a::before{
  left:-32px;    
  border-right: 16px solid #00a4f4; 
  border-bottom: 16px solid #00a4f4;
}
 
nav a::after{
  right:-32px;
  border-left: 16px solid #00a4f4; 
  border-top: 16px solid #00a4f4;
}
 
nav a:hover{
  background: #00a4f4;
}
nav a:hover::before, nav a:hover::after{
  display: block;
  color: #ffffff;
}
 
nav a:first-child{
  margin-left: 0;
}
nav a:first-child::before,
nav a:last-child::after{
  display: none;
  visibility: hidden;
  opacity: 0;
}

Комментарий модератора

Код должен присутствовать в тексте сообщения. Песочницы — это лишь бонус для демонстрации.

@xankriegor · 21.02.2016, 11:06

newJS, Уважаемый а я как раз ищу вот такие вот стрелочки. Будьте добры поделитесь.

@newJS · 22.02.2016, 06:41

Сообщение от xankriegor

я как раз ищу вот такие вот стрелочки. Будьте добры поделитесь.

Картинка менюшки в одинадцатом посту.
Основано на картах, используются две маленькие картинки, чтобы работал треугольник, а не прямоугольник. Менюшка резиновая, сама свою карту умет масштабировать.
Картинки маленькие, их можно в base64 засунуть.
Все нужные программы можно взять на сайте, адрес в подписи.

Новые блоги и статьи Все статьи Все блоги /
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .

@Dzvene 11 / 11 / 5 Регистрация: 27.09.2013 Сообщений: 278

	Горизонтальное меню с косыми линиями 15.03.2014, 13:39. Показов 3757. Ответов 14 Метки нет (Все метки) Подскажите как лучше сделать горизонтальное меню с косыми линиями: Сделал спрайтами, но надо чтобы пункты меню тянулись, поэтому спрайты не прошли: Может кто-то сталкивался с таким? 0

@Dzvene 11 / 11 / 5 Регистрация: 27.09.2013 Сообщений: 278
	15.03.2014, 14:01 [ТС]
	Дело в том что первый и последний элемент имеют один прямой угол 0

@zme9 94 / 67 / 23 Регистрация: 22.09.2013 Сообщений: 626
	15.03.2014, 14:05
	А если сделать его чуть больше , а общему блоку задать overflow:hidden; ? 0

@Dzvene 11 / 11 / 5 Регистрация: 27.09.2013 Сообщений: 278
	15.03.2014, 14:12 [ТС]
	http://codepen.io/Dzvene/pen/ruilt Тогда с правым краем возникает проблема 0

@fol 511 / 485 / 161 Регистрация: 08.07.2013 Сообщений: 1,714 Записей в блоге: 1
	15.03.2014, 15:21
	можно фон для li задать 3-мя картинками: для вертикальной черты в 1px repeat-x ну, только png-шками, естессно, не джпегом 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	15.03.2014, 15:35
	... или использовать псевдо-элементы и border-треугольники. 0

@Dzvene 11 / 11 / 5 Регистрация: 27.09.2013 Сообщений: 278
	15.03.2014, 20:51 [ТС]
	А вы можете показать примерный код, как это будет выглядеть?) 0

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,529
	15.03.2014, 21:35
	это немного другое, но все же сложное меню 0

@Dzvene 11 / 11 / 5 Регистрация: 27.09.2013 Сообщений: 278
	15.03.2014, 21:40 [ТС]
	Дело в том что можно тремя картинками сделать, но есть одно "но", они должны заезжать друг под друга(ведь у них скос). Я уже много чего перепробовал, ума не приложу как это сделать 0

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,529
	15.03.2014, 21:58
	в залежах нашел такое, может получится завтра переделать под косяк а тут хитрость, носик и хвостик треугольные, а не прямоугольные, как все делают Миниатюры 0

@xankriegor 0 / 0 / 0 Регистрация: 21.02.2016 Сообщений: 1
	21.02.2016, 11:06
	newJS, Уважаемый а я как раз ищу вот такие вот стрелочки. Будьте добры поделитесь. 0