将箭头样式的列表元素包装在另一个箭头中 [英] wrap arrow styled list elements in another arrow

问题描述

我有以下 ul ，其中包含一些 li ，并以箭头显示/设置样式，并且一切正常.

I have the follow ul that contains some li and are displayed/styled as arrows, and everything is working fine.

<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 换成另一个箭头".

My problem is that I cant seem to wrap the last 5 li in another "arrow".

<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>

这是当前正在运行的示例:

This is the currently working example:

.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>

这是我目前所在的位置.

This is where I'm at currently.

.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>

我知道这可能很简单，但是我真的很吃惊.

I know it might be a simple thing, but i really struckle with it.

我想要什么.

推荐答案

我会考虑使用梯度创建形状的另一种方法，可以轻松嵌套所需的元素并调整距离并使用margin和也可以使用我使用的CSS变量轻松更改颜色:

I would consider another way to create the shape using gradient and it will be easier to nest element like you want and adjust the distance and control the arrow using margin and also easily change the color with the CSS variable I used:

.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>

这篇关于将箭头样式的列表元素包装在另一个箭头中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！