Обернуть элементы списка со стрелкой в ​​другую стрелку

У меня есть следующий ul, который содержит немного li и отображается / оформлен в виде стрелок, и все работает нормально.

<div class = "phases">
  <ul class = "breadcrumb">
    <li><a href = "Pre-project.aspx">Pre-project</a></li>
    <li><a href = "Analysis.aspx">Analysis</a></li>
    <li><a href = "Design.aspx">Design</a></li>
    <li><a href = "Development.aspx">Development</a></li>
    <li><a href = "Implementation.aspx">Implementation</a></li>
    <li><a href = "Operation.aspx">Operation</a></li>
  </ul>
</div>

Моя проблема в том, что я не могу обернуть последние 5 li другой "стрелкой".

<div class = "phases">
  <ul class = "breadcrumb">
    <li><a href = "Pre-project.aspx">Pre-project</a></li>
    <li class = "breadcrumb_wrapper">
      <ul class = "">
        <li><a href = "Analysis.aspx">Analysis</a></li>
        <li><a href = "Design.aspx">Design</a></li>
        <li><a href = "Development.aspx">Development</a></li>
        <li><a href = "Implementation.aspx">Implementation</a></li>
        <li><a href = "Operation.aspx">Operation</a></li>
      </ul>
    </li>
  </ul>
</div>

Это текущий рабочий пример:

.phases {
  width: 960px;
}

.breadcrumb {
  list-style: none;
  overflow: hidden;
  font: 18px Sans-Serif;
}

.breadcrumb li {
  float: left;
}

.breadcrumb li a {
  color: white;
  text-decoration: none;
  padding: 20px 10px 20px 60px;
  background: blue;
  /* fallback color */
  background: #004c89;
  position: relative;
  display: block;
  float: left;
}

.breadcrumb li.active a {
  background: #0078d7;
}

.breadcrumb li.active a::after {
  border-left: 30px solid #0078d7;
}

.breadcrumb li a::after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid #004c89;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 100%;
  z-index: 2;
}

.breadcrumb li a::before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 30px solid white;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  margin-left: 5px;
  left: 100%;
  z-index: 1;
}

.breadcrumb li:first-child a {
  padding-left: 10px;
}

.breadcrumb li a {
  background: #004c89;
}

.breadcrumb li a:after {
  border-left-color: #004c89;
}


/*
    .breadcrumb li:nth-child(2) a       { background:        hsla(34,85%,45%,1); }
    .breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
    .breadcrumb li:nth-child(3) a       { background:        hsla(34,85%,55%,1); }
    .breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
    .breadcrumb li:nth-child(4) a       { background:        hsla(34,85%,65%,1); }
    .breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
    .breadcrumb li:nth-child(5) a       { background:        hsla(34,85%,75%,1); }
    .breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
    */

.breadcrumb li a:hover {
  background: #0078d7;
}

.breadcrumb li a:hover:after {
  border-left-color: #0078d7 !important;
}
<div class = "phases">
  <ul class = "breadcrumb">
    <li><a href = "Pre-project.aspx">Pre-project</a></li>
    <li><a href = "Analysis.aspx">Analysis</a></li>
    <li><a href = "Design.aspx">Design</a></li>
    <li><a href = "Development.aspx">Development</a></li>
    <li><a href = "Implementation.aspx">Implementation</a></li>
    <li><a href = "Operation.aspx">Operation</a></li>
  </ul>
</div>

Вот где я сейчас нахожусь.

.phases {
  /*width: 960px;*/
}

.breadcrumb_wrapper {
  color: white;
  text-decoration: none;
  padding: 20px 10px 20px 60px;
  background: blue;
  /* fallback color */
  background: green;
  position: relative;
  display: block;
  float: left;
}

.breadcrumb_wrapper ul {
  list-style: none;
}

.breadcrumb {
  list-style: none;
  overflow: hidden;
  font: 18px Sans-Serif;
}

.breadcrumb li {
  float: left;
}

.breadcrumb li a {
  color: white;
  text-decoration: none;
  padding: 20px 10px 20px 60px;
  background: blue;
  /* fallback color */
  background: #004c89;
  position: relative;
  display: block;
  float: left;
}

.breadcrumb li.active a {
  background: #0078d7;
}

.breadcrumb li.active a::after {
  border-left: 30px solid #0078d7;
}

.breadcrumb li a::after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid #004c89;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 100%;
  z-index: 2;
}

.breadcrumb li a::before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 30px solid white;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  margin-left: 5px;
  left: 100%;
  z-index: 1;
}

.breadcrumb li:first-child a {
  padding-left: 10px;
}

.breadcrumb li a {
  background: #004c89;
}

.breadcrumb li a:after {
  border-left-color: #004c89;
}


/*
    .breadcrumb li:nth-child(2) a       { background:        hsla(34,85%,45%,1); }
    .breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
    .breadcrumb li:nth-child(3) a       { background:        hsla(34,85%,55%,1); }
    .breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
    .breadcrumb li:nth-child(4) a       { background:        hsla(34,85%,65%,1); }
    .breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
    .breadcrumb li:nth-child(5) a       { background:        hsla(34,85%,75%,1); }
    .breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
    */

.breadcrumb li a:hover {
  background: #0078d7;
}

.breadcrumb li a:hover:after {
  border-left-color: #0078d7 !important;
}
<div class = "phases">
  <ul class = "breadcrumb">
    <li><a href = "Pre-project.aspx">Pre-project</a></li>
    <li class = "breadcrumb_wrapper">
      <ul class = "">
        <li><a href = "Analysis.aspx">Analysis</a></li>
        <li><a href = "Design.aspx">Design</a></li>
        <li><a href = "Development.aspx">Development</a></li>
        <li><a href = "Implementation.aspx">Implementation</a></li>
        <li><a href = "Operation.aspx">Operation</a></li>
      </ul>
    </li>
  </ul>
</div>

Я знаю, что это может быть простая вещь, но меня это действительно поразило.

Что я хочу. Обернуть элементы списка со стрелкой в ​​другую стрелку

html css
05.04.2018 10:54
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
0
75
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ваша проблема начинается, когда вы стилизуете свой li's обычным способом, а не по имени class или id. Таким образом, ваш breadcrumb_wrapper li пострадает, если этот контейнер не имеет тех же стилей, что и другие. Попробуйте использовать класс для каждого li. Вы хотите вести себя как стрелка и не использовать его в контейнере.

Начальная точка во фрагменте

.phases {
  /*width: 960px;*/
}

.breadcrumb_wrapper {
 
}

.breadcrumb_wrapper ul {
  list-style: none;
}

.breadcrumb {
  list-style: none;
  overflow: hidden;
  font: 18px Sans-Serif;
}

.breadcrumb .arrow {
  float: left;
}

.breadcrumb .arrow a {
  color: white;
  text-decoration: none;
  padding: 20px 10px 20px 60px;
  background: blue;
  /* fallback color */
  background: #004c89;
  position: relative;
  display: block;
  float: left;
}

.breadcrumb .arrow.active a {
  background: #0078d7;
}

.breadcrumb .arrow.active a::after {
  border-left: 30px solid #0078d7;
}

.breadcrumb .arrow a::after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid #004c89;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 100%;
  z-index: 2;
}

.breadcrumb .arrow a::before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 30px solid white;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  margin-left: 5px;
  left: 100%;
  z-index: 1;
}

.breadcrumb .arrow:first-child a {
  padding-left: 10px;
}

.breadcrumb .arrow a {
  background: #004c89;
}

.breadcrumb .arrow a:after {
  border-left-color: #004c89;
}


/*
    .breadcrumb li:nth-child(2) a       { background:        hsla(34,85%,45%,1); }
    .breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
    .breadcrumb li:nth-child(3) a       { background:        hsla(34,85%,55%,1); }
    .breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
    .breadcrumb li:nth-child(4) a       { background:        hsla(34,85%,65%,1); }
    .breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
    .breadcrumb li:nth-child(5) a       { background:        hsla(34,85%,75%,1); }
    .breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
    */

.breadcrumb .arrow a:hover {
  background: #0078d7;
}

.breadcrumb .arrow a:hover:after {
  border-left-color: #0078d7 !important;
}
<div class = "phases">
  <ul class = "breadcrumb">
    <li class = "arrow" style = "margin-right:50px;"><a href = "Pre-project.aspx">Pre-project</a></li>
    <li class = "breadcrumb_wrapper">
      <ul class = "">
        <li class = "arrow"><a href = "Analysis.aspx">Analysis</a></li>
        <li class = "arrow"><a href = "Design.aspx">Design</a></li>
        <li class = "arrow"><a href = "Development.aspx">Development</a></li>
        <li class = "arrow"><a href = "Implementation.aspx">Implementation</a></li>
        <li class = "arrow"><a href = "Operation.aspx">Operation</a></li>
      </ul>
    </li>
  </ul>
</div>

Я не вижу, чтобы последние 5 ли заворачивались в другую стрелку?

— user7255640 05.04.2018 11:06
05.04.2018 11:05
Ответ принят как подходящий

Я бы рассмотрел другой способ создания формы с использованием градиента, и было бы проще вложить элемент, как вы хотите, и отрегулировать расстояние и управлять стрелкой с помощью поля, а также легко изменить цвет с помощью переменной CSS, которую я использовал:

.phases {
  width: 1500px;
}

.breadcrumb {
  list-style: none;
  overflow: hidden;
  font: 18px Sans-Serif;
  margin: 0;
  padding: 10px 0;
}

.breadcrumb li {
  float: left;
  margin-right: -15px;
}

.breadcrumb li:first-child {
  margin-left: -20px;
}

.breadcrumb li a {
  color: white;
  text-decoration: none;
  padding: 20px 40px;
  --c: #004c89;
  background: 
  linear-gradient(var(--c), var(--c)) 20px 0 /calc(100% - 40px) 100% no-repeat, 
  linear-gradient(to bottom right, var(--c) 50%, transparent 50.5%) 100% 100%/20px 51% no-repeat, 
  linear-gradient(to top right, var(--c) 50%, transparent 50.5%) 100% 0/20px 51% no-repeat, 
  linear-gradient(to top left, var(--c) 50%, transparent 50.5%) 0 100%/20px 51% no-repeat, 
  linear-gradient(to bottom left, var(--c) 50%, transparent 50.5%) 0 0/20px 51% no-repeat;
  position: relative;
  float: left;
}

.breadcrumb li a:hover {
  --c: #0078d7;
}

.breadcrumb_wrapper {
  margin-left: 30px;
  position: relative;
}

.breadcrumb_wrapper:before {
  content: "";
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: -25px;
  right: 0;
  --c:green;
  background:
  linear-gradient(var(--c), var(--c)) 20px 0 /calc(100% - 40px) 100% no-repeat, 
  linear-gradient(to bottom right, var(--c) 50%, transparent 50.5%) 100% 100%/20px 51% no-repeat, 
  linear-gradient(to top right, var(--c) 50%, transparent 50.5%) 100% 0/20px 51% no-repeat, 
  linear-gradient(to top left, var(--c) 50%, transparent 50.5%) 0 100%/20px 51% no-repeat, 
  linear-gradient(to bottom left, var(--c) 50%, transparent 50.5%) 0 0/20px 51% no-repeat;
}

.breadcrumb_wrapper .breadcrumb {
  padding: 0;
}

.breadcrumb_wrapper ul li:last-child {
  margin-right: 20px;
}
<div class = "phases">
  <ul class = "breadcrumb">
    <li><a href = "Pre-project.aspx">Pre-project</a></li>
    <li><a href = "Analysis.aspx">Analysis</a></li>
    <li><a href = "Design.aspx">Design</a></li>
    <li class = "breadcrumb_wrapper">
      <ul class = "breadcrumb">
        <li><a href = "Analysis.aspx">Analysis</a></li>
        <li><a href = "Design.aspx">Design</a></li>
        <li><a href = "Development.aspx">Development</a></li>
        <li><a href = "Implementation.aspx">Implementation</a></li>
        <li><a href = "Operation.aspx">Operation</a></li>
      </ul>
    </li>
  </ul>
</div>

Прошу прощения, если я сделал свой запрос неясным, но последние 5 ли должны быть заключены в другую «стрелку», чтобы последние 5 были внутри зеленой стрелки. так что большая зеленая стрелка окружает последние 5 ли

— user7255640 05.04.2018 11:24

@PeterHansen проверь обновление;) .. я тоже поменяю цвет

— Temani Afif 05.04.2018 11:25

@PeterHansen снова проверь обновление, я изменил цвет

— Temani Afif 05.04.2018 11:27

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

— user7255640 05.04.2018 11:29

@PeterHansen снова обновите;) ... кстати, вы можете легко делать то, что хотите, с конфигурацией, которую я сделал

— Temani Afif 05.04.2018 11:32

Извините, но я не вижу, чтобы пример был похож на картинку или близок к ней.

— user7255640 05.04.2018 12:03

@PeterHansen, что мне не хватает? :) .. только зеленый фон, как я вижу, я могу легко добавить, но стрелка похожа на то, что вы хотите, просто с большим количеством элементов

— Temani Afif 05.04.2018 12:06

Да зеленый фон.

— user7255640 05.04.2018 12:15

@PeterHansen я также сделал зеленый фон стрелкой;)

— Temani Afif 05.04.2018 12:24

Это потрясающе, я знаю, что это настаивает, но можете ли вы добавить белый > в начале зеленого?

— user7255640 05.04.2018 12:28

@PeterHansen: да, это легко добавить ... вы можете видеть, что я просто повторно использовал тот же градиент

— Temani Afif 05.04.2018 12:30

Прекрасно, если я где-нибудь сделаю зеленую «стрелку» немного длиннее (нос), как это сделать, какую часть я масштабирую

— user7255640 05.04.2018 12:50

@PeterHansen, вы можете воспроизвести значение псевдоэлемента, где я применил градиент [левое и правое значение), увеличивайте / уменьшайте их, чтобы увидеть, что происходит

— Temani Afif 05.04.2018 12:57
05.04.2018 11:22

Обновите свои css и html вот так

.phases {
  /*width: 960px;*/
}

.breadcrumb_wrapper {
  color: white;
  text-decoration: none;
  padding: 20px 10px 20px 20px;
  background: blue;
  /* fallback color */
  background: green;
  position: relative;
  display: block;
  float: left;
}

.breadcrumb_wrapper ul {
  list-style: none;
}

.breadcrumb {
  list-style: none;
  overflow: hidden;
  font: 18px Sans-Serif;
}

.breadcrumb li {
  float: left;
}

.breadcrumb li a {
  color: white;
  text-decoration: none;
  padding: 20px 10px 20px 60px;
  background: blue;
  /* fallback color */
  background: #004c89;
  position: relative;
  display: block;
  float: left;
}

.breadcrumb li.active a {
  background: #0078d7;
}

.breadcrumb li.active a::after {
  border-left: 30px solid #0078d7;
}

.breadcrumb li a::after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid #004c89;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 100%;
  z-index: 2;
}

.breadcrumb li a::before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 30px solid white;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  margin-left: 5px;
  left: 100%;
  z-index: 1;
}

.breadcrumb li:first-child a {
  padding-left: 10px;
}

.breadcrumb li a {
  background: #004c89;
}

.breadcrumb li a:after {
  border-left-color: #004c89;
}


/*
    .breadcrumb li:nth-child(2) a       { background:        hsla(34,85%,45%,1); }
    .breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
    .breadcrumb li:nth-child(3) a       { background:        hsla(34,85%,55%,1); }
    .breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
    .breadcrumb li:nth-child(4) a       { background:        hsla(34,85%,65%,1); }
    .breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
    .breadcrumb li:nth-child(5) a       { background:        hsla(34,85%,75%,1); }
    .breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
    */

.breadcrumb li a:hover {
  background: #0078d7;
}

.breadcrumb li a:hover:after {
  border-left-color: #0078d7 !important;
}

.first-set-li{ float:left; margin-right:50px; overflow:hidden; padding-right:33px; margin-top:20px; }

.breadcrumb_wrapper ul{ padding:0px; float:left; overflow:hidden; padding-right:40px;}
.breadcrumb .breadcrumb_wrapper li a::before{ border-left: 30px solid green; }

HTML

<div class = "phases">
  <ul class = "breadcrumb">
    <li class = "first-set-li"><a href = "Pre-project.aspx">Pre-project</a></li>
    <li class = "breadcrumb_wrapper">
      <ul class = "">
        <li><a href = "Analysis.aspx">Analysis</a></li>
        <li><a href = "Design.aspx">Design</a></li>
        <li><a href = "Development.aspx">Development</a></li>
        <li><a href = "Implementation.aspx">Implementation</a></li>
        <li><a href = "Operation.aspx">Operation</a></li>
      </ul>
    </li>
  </ul>
</div>

Отлично, можно ли сделать зеленый ящик похожим на стрелку с > на каждом конце?

— user7255640 05.04.2018 12:16

@PeterHansen. я не понял это ясно. не могли бы вы поделиться снимком экрана с тем, что вы просили?

— Ajeesh KH 05.04.2018 12:29
05.04.2018 12:15

Другие вопросы по теме

Выравнивание текста: центр; не работает в Safari
Курсор застревает на изображении в редактируемом содержимом div
Ошибка при объединении моего CSS с использованием связывания js
Mp4-видео не отображается в IE11
Липкий нижний колонтитул не работает на мобильных устройствах
Эффект переполнения изображения с использованием javascript
Извлечь данные из тега span внутри тега div
Отображение изображения с использованием attr в элементе выбора HTML
Символ листа Fontawesome не работает, пока символ точки работает в :: до использования содержимого в css
Горизонтальная прокрутка с использованием CSS в пользовательском интерфейсе каменной кладки

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

Выравнивание текста: центр; не работает в Safari
Курсор застревает на изображении в редактируемом содержимом div
Mp4-видео не отображается в IE11
Липкий нижний колонтитул не работает на мобильных устройствах
Эффект переполнения изображения с использованием javascript
Как изменить цвет только одной кнопки?
Извлечь данные из тега span внутри тега div
Использование значений php в javascript
Отображение изображения с использованием attr в элементе выбора HTML
Клон JavaScript div не работает должным образом