Search code examples
htmlbreadcrumbs

Basic structure

I want to make a basic structure like this but the condition is that i have to use only "li" in html and design it completely using CSS.And structure should be like this that i can fit any image into it.

HTML:

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

  • Here is one way, using pseudo elements, which is skewed, one at the top half, the other at the bottom half.

    Updated with an option to also use an image, and since object-fit doesn't have great browser support yet, here done using 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>

    Here with an img element and 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>

    Here with an img element and 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>