基本结构

Question

我想做一个像这样的基本结构，但条件是我必须在html中只使用"li"并完全使用CSS.And结构设计它应该是这样的我可以将任何图像放入其中。

HTML:

<ul class="basic_chevron_process">
<li>Process 1</li>
<li>Process 2</li>
<li>Process 3</li>
</ul>

Answer 1

这是一种方法，使用伪元素，它是倾斜的，一个在上半部分，另一个在下半部分。

更新了一个也可以使用图像的选项，并且由于 object-fit 还没有很好的浏览器支持，这里使用 background/cover

.basic_chevron_process,
.basic_chevron_process li {
  margin: 0;
  padding: 0;
}
.basic_chevron_process li {
  display: inline-block;
  position: relative;
  text-align: center;
  height: 60px;
  line-height: 60px;
  padding: 0 10px;
  width: 120px;
  vertical-align: top;
  overflow: hidden
}
.basic_chevron_process li input,
.basic_chevron_process li select {
  width: 70%;
}
.basic_chevron_process li:before,
.basic_chevron_process li:after {
  content: '';
  position: absolute;
  top: 0;
  left: 6%;
  height: 50%;
  width: 88%;
  background: lightblue;
  transform: skewX(30deg);
  z-index: -1;
}
.basic_chevron_process li:after {
  top: 50%;
  transform: skewX(-30deg);
}
.basic_chevron_process li:nth-child(2)::before {
  display: none;
}
.basic_chevron_process li:nth-child(2)::after {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  transform: skewX(0);
  background: linear-gradient(60deg, transparent 50%, #fff 50%) no-repeat right top,
              linear-gradient(120deg, transparent 50%, #fff 50%) no-repeat right bottom,
              linear-gradient(-120deg, transparent 50%, #fff 50%) no-repeat left top,
              linear-gradient(-60deg, transparent 50%, #fff 50%) no-repeat left bottom,
              url(http://lorempixel.com/300/200/animals/3/) no-repeat center;
  background-size: 31px 31px,
                   31px 31px,
                   31px 31px,
                   31px 31px,
                   cover;
}

<ul class="basic_chevron_process">
  <li>
    <input type="text" value="TEXT1" id="list2_text" />
  </li>
  <li>    
  </li>
  <li>
    <select>
      <option value="1">Option1</option>
      <option value="2">Option2</option>
    </select>
  </li>
</ul>

这里有一个 img 元素和 object-fit

.basic_chevron_process,
.basic_chevron_process li {
  margin: 0;
  padding: 0;
}
.basic_chevron_process li {
  display: inline-block;
  position: relative;
  text-align: center;
  height: 60px;
  line-height: 60px;
  padding: 0 10px;
  width: 120px;
  vertical-align: top;
  overflow: hidden
}
.basic_chevron_process li input,
.basic_chevron_process li select {
  width: 70%;
}
.basic_chevron_process li:before,
.basic_chevron_process li:after {
  content: '';
  position: absolute;
  top: 0;
  left: 6%;
  height: 50%;
  width: 88%;
  background: lightblue;
  transform: skewX(30deg);
  z-index: -1;
}
.basic_chevron_process li:after {
  top: 50%;
  transform: skewX(-30deg);
}
.basic_chevron_process li:nth-child(2)::before {
  display: none;
}
.basic_chevron_process li:nth-child(2)::after {
  left: 2%;
  top: 0;
  height: 100%;
  width: 96%;
  transform: skewX(0);
  z-index: 1;
  background: linear-gradient(60deg, transparent 50%, #fff 50%) no-repeat right top,
              linear-gradient(120deg, transparent 50%, #fff 50%) no-repeat right bottom,
              linear-gradient(-120deg, transparent 50%, #fff 50%) no-repeat left top,
              linear-gradient(-60deg, transparent 50%, #fff 50%) no-repeat left bottom;
  background-size: 31px 31px,
                   31px 31px,
                   31px 31px,
                   31px 31px;
}
.basic_chevron_process li:nth-child(2) img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<ul class="basic_chevron_process">
  <li>
    <input type="text" value="TEXT1" id="list2_text" />
  </li>
  <li>   
    <img src="http://lorempixel.com/300/200/animals/3/" alt="">
  </li>
  <li>
    <select>
      <option value="1">Option1</option>
      <option value="2">Option2</option>
    </select>
  </li>
</ul>

这里有一个 img 元素和 transform: translate

.basic_chevron_process,
.basic_chevron_process li {
  margin: 0;
  padding: 0;
}
.basic_chevron_process li {
  display: inline-block;
  position: relative;
  text-align: center;
  height: 60px;
  line-height: 60px;
  padding: 0 10px;
  width: 120px;
  vertical-align: top;
  overflow: hidden
}
.basic_chevron_process li input,
.basic_chevron_process li select {
  width: 70%;
}
.basic_chevron_process li:before,
.basic_chevron_process li:after {
  content: '';
  position: absolute;
  top: 0;
  left: 6%;
  height: 50%;
  width: 88%;
  background: lightblue;
  transform: skewX(30deg);
  z-index: -1;
}
.basic_chevron_process li:after {
  top: 50%;
  transform: skewX(-30deg);
}
.basic_chevron_process li:nth-child(2)::before {
  display: none;
}
.basic_chevron_process li:nth-child(2)::after {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  transform: skewX(0);
  z-index: 1;
  background: linear-gradient(60deg, transparent 50%, #fff 50%) no-repeat right top,
              linear-gradient(120deg, transparent 50%, #fff 50%) no-repeat right bottom,
              linear-gradient(-120deg, transparent 50%, #fff 50%) no-repeat left top,
              linear-gradient(-60deg, transparent 50%, #fff 50%) no-repeat left bottom;
  background-size: 31px 31px,
                   31px 31px,
                   31px 31px,
                   31px 31px;
}
.basic_chevron_process li:nth-child(2) img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
}

<ul class="basic_chevron_process">
  <li>
    <input type="text" value="TEXT1" id="list2_text" />
  </li>
  <li>   
    <img src="http://lorempixel.com/300/200/animals/3/" alt="">
  </li>
  <li>
    <select>
      <option value="1">Option1</option>
      <option value="2">Option2</option>
    </select>
  </li>
</ul>

基本结构

Basic structure

html

breadcrumbs