Меню с косыми линиями

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

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

Кто знает, пожалуйста подскажите как это можно сделать:

Есть небольшие наработки:

HTML5
1
2
3
4
<ul>
    <li><a href="#">Коучи</a></li>
    <li><a href="#">Компании</a></li>
</ul>

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
ul {
    border:1px solid #ccc;
    height: 40px;
    margin: 15px;
    float: left;
    overflow: hidden;
}
li {
    float: left;
    border-left:1px solid #ccc;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
    transform: skew(20deg);
}
li:first-child {
    margin-left: -10px;
    padding-left: 10px;
}
li:last-child {
    margin-right: -10px;
    padding-right: 10px;
}
li:hover {
    background: #00a8b4;
    color: #fff;
}
li > a {
    text-decoration: none;
    display: block;
    position: relative;
    line-height: 40px;
    padding: 0 20px;
    color: #000;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -o-transform: skew(-20deg);
    transform: skew(-20deg);
}
li > a:hover {
    color: #fff;
}

http://jsfiddle.net/dzvene/b42YK/6/

@Vladislav WebDev · 25.05.2014, 22:00

Dzvene, накидал тут слегка, додумаете сами если что http://jsbin.com/qubofane/1/

HTML5
1
2
3
4
5
6
<ul>
  <li><div><a href="#">фыва</a></div></li>
  <li><div><a href="#">Связь</a></div></li>
  <li><div><a href="#">Компании</a></div></li>
  <li class='current'><div><a href="#">Коучи</a></div></li>
</ul>

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
* {
  margin: 0;
  padding: 0;
  outline: none;
}
 
ul {
  list-style: none;
  float: left;
}
 
li {
  float: right;
  overflow: hidden;
  margin-left: -10px;
  position: relative;
  z-index: 1;
  border-left: 2px solid #FF952B;
}
 
li div {
  transform: skewX(30deg);
  position: relative;
  top: 0;
  left: -14px;
  overflow: hidden;
  border-radius: 0 4px 0;
  box-shadow: 0 0 5px #FF5202 inset;
  background: rgb(255,191,120);
  background: -moz-linear-gradient(top,  rgba(255,191,120,1) 0%, rgba(255,135,2,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,191,120,1)), color-stop(100%,rgba(255,135,2,1)));
  background: -webkit-linear-gradient(top,  rgba(255,191,120,1) 0%,rgba(255,135,2,1) 100%);
  background: -o-linear-gradient(top,  rgba(255,191,120,1) 0%,rgba(255,135,2,1) 100%);
  background: -ms-linear-gradient(top,  rgba(255,191,120,1) 0%,rgba(255,135,2,1) 100%);
  background: linear-gradient(to bottom,  rgba(255,191,120,1) 0%,rgba(255,135,2,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbf78', endColorstr='#ff8702',GradientType=0 );
}
 
li a {
  display: block;
  text-decoration: none;
  font: 16px Arial;
  transform: skewX(-30deg);
  padding: 10px 50px;
  color: #fff;
}
 
li.current {
  z-index: 10;
  border: none;
}
 
li.current div {
  background: #fff;
  box-shadow: none;
  box-shadow: 1px 0 2px #444
}
 
li.current a {
  color: #444;
}

JavaScript
1
2
3
4
$('li').on('click', function() {
  $('li').removeClass('current');
  $(this).addClass('current');
})

@Dzvene · 25.05.2014, 22:07 **[ТС]**

Основная проблема, это скос, хотелось бы сделать стилями CSS

@Vladislav WebDev · 25.05.2014, 22:12

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

скос, хотелось бы сделать стилями CSS

Я так и сделал. Джаваскрипт просто класс добавляет, добавил для наглядности.

@Dzvene · 25.05.2014, 22:22 **[ТС]**

Я извиняюсь, просто скоса не вижу, есть бордер радиус только

@Vladislav WebDev · 25.05.2014, 22:39

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

просто скоса не вижу, есть бордер радиус только

В каком браузере смотрите? Сами добавьте префиксы ко всем трансформациям, да и вообще ко всем нужным свойствам, и будет всё тип-топ.
Кстати, если нужна полная кроссбраузерность с поддержкой ранних ИЕ, то без картинок в качестве фонов элементов списков не обойтись.

Добавлено через 2 минуты
Я в фаерфоксе если что смотрю. Вы походу в хроме или опере? Они без префиксов не понимиают трансформации.

Добавлено через 2 минуты
http://jsbin.com/qubofane/4/ - вот, с префиксами

@Dzvene · 25.05.2014, 22:54 **[ТС]**

Спасибо, разобрался.)))

Новые блоги и статьи Все статьи Все блоги /
Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения anaschu 22.03.2026 e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git	1С: Программный отбор элементов справочника по группе Maks 22.03.2026 Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию группы. . .	Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .
1С: Программный отбор элементов справочника по значению перечисления Maks 21.03.2026 Установка программного отбора элементов справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит значение перечислений. / / Событие "НачалоВыбора" реквизита на форме. . .	Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .	Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip

@Dzvene 11 / 11 / 5 Регистрация: 27.09.2013 Сообщений: 278
	25.05.2014, 22:07 [ТС]
	Основная проблема, это скос, хотелось бы сделать стилями CSS 0

@Dzvene 11 / 11 / 5 Регистрация: 27.09.2013 Сообщений: 278
	25.05.2014, 22:22 [ТС]
	Я извиняюсь, просто скоса не вижу, есть бордер радиус только 0

@Dzvene 11 / 11 / 5 Регистрация: 27.09.2013 Сообщений: 278
	25.05.2014, 22:54 [ТС]
	Спасибо, разобрался.))) 0

Меню с косыми линиями

Решение