Допилить хлебные крошки CSS

@Egor2014 · Регистрация: 22.10.2013

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

Помогите доработать последний блок крошек, который идет без ссылок.

HTML5
1
2
3
4
5
6
7
8
9
    <div class="xleb">
        <ul>
            <li><a href="#1">One ура первый</a></li>
            <li><a href="#2">Two</a></li>
            <li><a href="#3">Three третий</a></li>
            <li><a href="#4">Four</a></li>
            <li class="txtxleb">Five здесь пятый</li>
        </ul>
    </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
.xleb {text-align: center; }
.xleb ul {display: inline-table; list-style: none outside none;}
.xleb ul li {display: inline; margin-left:5px; line-height: 2.3;}
.xleb ul li a:after {content: ""; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #ddd; position: absolute; right: -20px; top: 0; z-index: 1;}
.xleb ul li a:before {content: ""; border-bottom: 20px solid transparent; border-left: 20px solid #ffffff; border-top: 20px solid transparent; position: absolute; top: 0; left: 0;}
.txtxleb, .xleb ul li a {display: block; float: left; height: 25px; background-color: #ddd; background-image: linear-gradient(to right, #f5f5f5, #ddd); text-align: center; padding: 15px 20px 0 40px; position: relative; margin: 0 5px 0 0; font-size: 14px; line-height: 0.8; text-decoration: none; color: #000000;}
.xleb ul li:first-child a {border-bottom-left-radius: 10px; border-top-left-radius: 10px;}
.xleb ul li:first-child a:before {display: none;}
.txtxleb, .xleb ul li:last-child a {border-bottom-right-radius: 10px; border-top-right-radius: 10px; padding-right: 80px;}
.xleb ul li:last-child a:after {display: none;}
.xleb ul li a:hover {background: none repeat scroll 0 0 #ffffff;}
.xleb ul li a:hover:after {border-left-color: #ffffff;}

То есть нужно последний хвостик выровнять по линии и слева у него сделать уголок. Все файлы прикладываю.

@smile7k · 10.11.2015, 17:21

А сделать так нельзя? Как вариант, и делать особо ничего не надо

HTML5
1
2
3
4
5
6
7
8
9
<div class="xleb">
        <ul>
            <li><a href="#1">One ура первый</a></li>
            <li><a href="#2">Two</a></li>
            <li><a href="#3">Three третий</a></li>
            <li><a href="#4">Four</a></li>
            <li class="txtxleb"><a>Five здесь пятый</a></li>
        </ul>
    </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.xleb {text-align: center; }
.xleb ul {display: inline-table; list-style: none outside none;}
.xleb ul li {display: inline; margin-left:5px; line-height: 2.3;}
.xleb ul li a:after {content: ""; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #ddd; position: absolute; right: -20px; top: 0; z-index: 1;}
.xleb ul li a:before {content: ""; border-bottom: 20px solid transparent; border-left: 20px solid #ffffff; border-top: 20px solid transparent; position: absolute; top: 0; left: 0;}
.xleb ul li a {display: block; float: left; height: 25px; background-color: #ddd; background-image: linear-gradient(to right, #f5f5f5, #ddd); text-align: center; padding: 15px 20px 0 40px; position: relative; margin: 0 5px 0 0; font-size: 14px; line-height: 0.8; text-decoration: none; color: #000000;}
.xleb ul li:first-child a {border-bottom-left-radius: 10px; border-top-left-radius: 10px;}
.xleb ul li:first-child a:before {display: none;}
.xleb ul li:last-child a {border-bottom-right-radius: 10px; border-top-right-radius: 10px; padding-right: 80px;}
.xleb ul li:last-child a:after {display: none;}
.xleb ul li a:hover {background: none repeat scroll 0 0 #ffffff;}
.xleb ul li a:hover:after {border-left-color: #ffffff;}
.txtxleb a:hover {text-decoration:none;}

@Egor2014 · 10.11.2015, 19:49 **[ТС]**

сейчас на сайте у меня так и есть, но нужно по другому

@winner_ua · 10.11.2015, 23:44

Попробуйте этот вариант:

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
  .xleb {text-align: center; }
  .xleb ul {display: inline-table; list-style: none outside none;}
  .xleb ul li {display: inline; }
  .xleb ul li a:after {content: ""; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #ddd; position: absolute; right: -20px; top: 0; z-index: 1;}
  .xleb ul li a:before {content: ""; border-bottom: 20px solid transparent; border-left: 20px solid #ffffff; border-top: 20px solid transparent; position: absolute; top: 0; left: 0;}
  .xleb ul li a {display: block; float: left; height: 25px; background-color: #ddd; background-image: linear-gradient(to right, #f5f5f5, #ddd); text-align: center; padding: 15px 20px 0 40px; position: relative; margin: 0 5px 0 0; font-size: 14px; line-height: 0.8; text-decoration: none; color: #000000;}
  .xleb ul li:first-child a {border-bottom-left-radius: 10px; border-top-left-radius: 10px;}
  .xleb ul li:first-child a:before {display: none;}
  .xleb ul li:last-child a {border-bottom-right-radius: 10px; border-top-right-radius: 10px; padding-right: 80px;}
 
  li.txtxleb {
    display: block;
    float: left;
    height: 25px;
    background-color: #ddd;
    background-image: linear-gradient(to right, #f5f5f5, #ddd);
    text-align: center;
    padding: 15px 20px 0 40px;
    position: relative;
    margin: 0 5px 0 0;
    font-size: 14px;
    line-height: 0.8;
    text-decoration: none;
    color: #000000;
  }
 
  .txtxleb:before {
    content: "";
    border-bottom: 20px solid transparent;
    border-left: 20px solid #ffffff;
    border-top: 20px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
  }
 
  .txtxleb:after {
    content: "";
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #ddd;
    position: absolute;
    right: -20px;
    top: 0;
    z-index: 1;
  }
 
  .xleb ul li:last-child a:after {display: none;}
  .xleb ul li a:hover {background: none repeat scroll 0 0 #ffffff;}
  .xleb ul li a:hover:after {border-left-color: #ffffff;}

@smile7k · 11.11.2015, 03:53

Ладно, держи свои крошки:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.xleb {text-align: center; }
.xleb ul {display: inline-table; list-style: none outside none;}
.xleb ul li {display: inline; margin-left:5px; line-height: 2.3;}
.xleb ul li a:after {content: ""; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #ddd; position: absolute; right: -20px; top: 0; z-index: 1;}
.xleb ul li a:before {content: ""; border-bottom: 20px solid transparent; border-left: 20px solid #ffffff; border-top: 20px solid transparent; position: absolute; top: 0; left: 0;}
.xleb ul li a {display: block; float: left; height: 25px; background-color: #ddd; background-image: linear-gradient(to right, #f5f5f5, #ddd); text-align: center; padding: 15px 20px 0 40px; position: relative; margin: 0 5px 0 0; font-size: 14px; line-height: 0.8; text-decoration: none; color: #000000;}
.xleb ul li:first-child a {border-bottom-left-radius: 10px; border-top-left-radius: 10px;}
.xleb ul li:first-child a:before {display: none;}
.xleb ul li a:hover {background: none repeat scroll 0 0 #ffffff;}
.xleb ul li a:hover:after {border-left-color: #ffffff;}
.xleb ul .last {display: block; float: left; height: 25px; background-color: #ddd; background-image: linear-gradient(to right, #f5f5f5, #ddd); text-align: center; padding: 15px 20px 0 40px; position: relative; margin: 0 5px 0 0; font-size: 14px; line-height: 0.8; text-decoration: none; color: #000000;}
.xleb ul .last:last-child  {border-bottom-right-radius: 10px; border-top-right-radius: 10px; padding-right: 80px;}
.xleb ul .last:before {content: ""; border-bottom: 20px solid transparent; border-left: 20px solid #ffffff; border-top: 20px solid transparent; position: absolute; top: 0; left: 0;}

HTML5
1
2
3
4
5
6
7
8
9
<div class="xleb">
        <ul>
            <li><a href="#1">One ура первый</a></li>
            <li><a href="#2">Two</a></li>
            <li><a href="#3">Three третий</a></li>
            <li><a href="#4">Four</a></li>
            <li class="last">Five</li>
        </ul>
    </div>

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Egor2014 29 / 8 / 3 Регистрация: 22.10.2013 Сообщений: 447
	10.11.2015, 19:49 [ТС]
	сейчас на сайте у меня так и есть, но нужно по другому 0

Допилить хлебные крошки CSS

Решение