Are the CSS flow arrows suffering from poor formatting?

Question

Are the CSS flow arrows suffering from poor formatting?

https://i.sstatic.net/ni3vf.pngAfter tinkering with code from three different individuals to create CSS arrows, I fear I may have overcomplicated things. Is there any CSS expert out there who can help me streamline this? I'm struggling to adjust the padding and other attributes to position it correctly within the divs.

CSS

<style>
/* Styles for Stage Arrows */
#testStatus {
  position: relative;
  width: auto;
  height: 30px;
  left: 10px; 
}
.testStatus li {
  position: relative;
  text-indent: 10px;
  height: 30px;
  display: inline-block;
  zoom: 1;
  margin-left: -3px;
  padding: 10px 10px 10px 10px;
  color: white;
  font-size: 12px;
  text-align: center;
  line-height: auto;
}
ul.testStatus {
  list-style: none;
  }
li.testStatus:first-child:after, li.testStatusGood:after, li.testStatusNoGood:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-left: 10px solid #767676;
    border-bottom: 15px solid transparent;
    margin: -10px 0px 0px 10px; 
    z-index: 3;
}
li.testStatus:last-child:before, li.testStatusGood:before, li.testStatusNoGood:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    border-top: 15px solid transparent;
    border-left: 10px solid #EEEEEE;
    border-bottom: 15px solid transparent;
    margin: -10px 0px 0px 0px; 
    z-index: 2;
}
li.testStatus:first-child {
    padding-left: 10px;
    margin-left: 0;
    background-color: #767676;
}
li.testStatus:last-child {
    padding-right: 10px;
    background-color: #767676;
}
li.testStatusGood {
  background-color: #77a942; 
}
li.testStatusGood:after {
  border-left: 10px solid #77a942;
}
li.testStatusNoGood {
  background-color: #c42c00; 
}
li.testStatusNoGood:after {
  border-left: 10px solid #c42c00; 
}
/* End arrow styling */
</style>

HTML

        <ul>
            <li>
                <div id="testStatus">
                    <ul class="testStatus">
                        <li class="testStatus">Step 1</li>
                        <li class="testStatusGood">Step 2</li>
                        <li class="testStatusNoGood">Step 3</li>
                        <li class="testStatusNoGood">Step 4</li>
                        <li class="testStatus">Step 5</li>
                    </ul>
                </div>
              
            </li>
        </ul>

The arrows are displaying nicely but I can't seem to set the padding to 0. I've tried tweaking the #, the ul class, the il class, and I'm puzzled as to why I can't eliminate the 10px (I believe it's due to the padding).

If you look closely, you'll notice a slightly darker border on the left side of the triangular part of the arrows. I'd like to match that color exactly.

https://i.sstatic.net/GfPEG.png

The output of Duo's code is shown above the image, and Ojer's code output is below image https://i.sstatic.net/MyTsM.png

I feel like I'm going in reverse :)

html css

Answer 1

Answer №1

Here is the solution:

.breadcrumbs {
  border: 1px solid #cbd2d9;
  border-radius: 0.3rem;
  display: inline-flex;
  overflow: hidden;
}

.breadcrumbs__item {
  background: #fff;
  color: #333;
  outline: none;
  padding: 0.75em 0.75em 0.75em 1.25em;
  position: relative;
  text-decoration: none;
  transition: background 0.2s linear;
}

.breadcrumbs__item:hover:after,
.breadcrumbs__item:hover {
  background: #edf1f5;
}

.breadcrumbs__item:focus:after,
.breadcrumbs__item:focus,
.breadcrumbs__item.is-active:focus {
  background: #323f4a;
  color: #fff;
}

.breadcrumbs__item:after,
.breadcrumbs__item:before {
  background: white;
  bottom: 0;
  clip-path: polygon(50% 50%, -50% -50%, 0 100%);
  content: "";
  left: 100%;
  position: absolute;
  top: 0;
  transition: background 0.2s linear;
  width: 1em;
  z-index: 1;
}

.breadcrumbs__item:before {
  background: #cbd2d9;
  margin-left: 1px;
}

.breadcrumbs__item:last-child {
  border-right: none;
}

.breadcrumbs__item.is-active {
  background: #edf1f5;
}

/* Additional styles for better page appearance */
body {
  color: #323f4a;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;

}

html, body {
  height: 100%;
}


.gray{
background-color:gray;
}
.breadcrumbs__item.gray:after{
background-color:gray;
}

.red{
background-color:red;
}
.breadcrumbs__item.red:after{
background-color:red;
}


.green{
background-color:green;
}
.breadcrumbs__item.green:after{
background-color:green;
}

<li class="breadcrumbs">
  <a href="#Prospect" class="breadcrumbs__item gray">Prospect</a>
  <a href="#Opportunity" class="breadcrumbs__item red">Opportunity</a> 
  <a href="#Accound" class="breadcrumbs__item red">Accound</a>
  <a href="#Sales" class="breadcrumbs__item green">Sales</a> 
  <a href="#Support" class="breadcrumbs__item is-active">Support</a> 
</li>

Answer 2

Here is the solution:

.breadcrumbs {
  border: 1px solid #cbd2d9;
  border-radius: 0.3rem;
  display: inline-flex;
  overflow: hidden;
}

.breadcrumbs__item {
  background: #fff;
  color: #333;
  outline: none;
  padding: 0.75em 0.75em 0.75em 1.25em;
  position: relative;
  text-decoration: none;
  transition: background 0.2s linear;
}

.breadcrumbs__item:hover:after,
.breadcrumbs__item:hover {
  background: #edf1f5;
}

.breadcrumbs__item:focus:after,
.breadcrumbs__item:focus,
.breadcrumbs__item.is-active:focus {
  background: #323f4a;
  color: #fff;
}

.breadcrumbs__item:after,
.breadcrumbs__item:before {
  background: white;
  bottom: 0;
  clip-path: polygon(50% 50%, -50% -50%, 0 100%);
  content: "";
  left: 100%;
  position: absolute;
  top: 0;
  transition: background 0.2s linear;
  width: 1em;
  z-index: 1;
}

.breadcrumbs__item:before {
  background: #cbd2d9;
  margin-left: 1px;
}

.breadcrumbs__item:last-child {
  border-right: none;
}

.breadcrumbs__item.is-active {
  background: #edf1f5;
}

/* Additional styles for better page appearance */
body {
  color: #323f4a;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;

}

html, body {
  height: 100%;
}


.gray{
background-color:gray;
}
.breadcrumbs__item.gray:after{
background-color:gray;
}

.red{
background-color:red;
}
.breadcrumbs__item.red:after{
background-color:red;
}


.green{
background-color:green;
}
.breadcrumbs__item.green:after{
background-color:green;
}

<li class="breadcrumbs">
  <a href="#Prospect" class="breadcrumbs__item gray">Prospect</a>
  <a href="#Opportunity" class="breadcrumbs__item red">Opportunity</a> 
  <a href="#Accound" class="breadcrumbs__item red">Accound</a>
  <a href="#Sales" class="breadcrumbs__item green">Sales</a> 
  <a href="#Support" class="breadcrumbs__item is-active">Support</a> 
</li>

Answer 3

Answer №2

This method may be the solution you need.

Take a look at this Pen

HTML Code:

<ul class="steps">
  <li class="past">
    <span>
      <strong>Step 1</strong>
    </span><i></i>
  </li>
  <li class="present">
    <span>
      <strong>Step 2</strong>
    </span><i></i>
  </li>
  <li class="future">
    <span>
      <strong>Step 3</strong>
    </span><i></i>
  </li>
  <li class="future1">
    <span>
      <strong>Step 4</strong>
    </span><i></i>
  </li>
  <li class="present1">
    <span>
      <strong>Step 5</strong>
    </span><i></i>
  </li>
</ul>

CSS Styles:

.steps {
  padding-left: 0;
  list-style: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1;
  margin: 30px auto;
  border-radius: 3px;
}

.steps strong {
  font-size: 14px;
  display: block;
  line-height: 2.1;
}

.steps > li {
  position: relative;
  display: block;
  /* border: 1px solid #ddd; */
  padding: 12px 50px 8px 50px;
  width: 140px;
  height: 40px;
}

@media (min-width: 768px) {
  .steps > li {
    float: left;
  }
  .steps .past {
    color: #fff;
    background: blue;
  }
  .steps .present {
    color: #000;
    background: yellow;
  }
  .steps .future {
    color: #fff;
    background: green;
  }
  .steps .present1 {
    color: #000;
    background: red;
  }
  .steps .future1 {
    color: #fff;
    background: purple;
  }
  .steps .present1 {
    color: #fff;
  }

  .steps li > span:after,
  .steps li > span:before {
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    position: absolute;
    top: 0;
    left: 0;
    border: solid transparent;
    border-left-color: #f0f0f0;
    border-width: 30px;
  }

  .steps li > span:after {
    top: -4px;
    z-index: 1;
    border-left-color: white;
    border-width: 34px;
  }

  .steps li > span:before {
    z-index: 2;
  }

  .steps li.past + li > span:before {
    border-left-color: blue;
  }
  .steps li.present + li > span:before {
    border-left-color: yellow;
  }
  .steps li.future + li > span:before {
    border-left-color: green;
  }
  .steps li.future1 + li > span:before {
    border-left-color: purple;
  }

  .steps li:first-child > span:after,
  .steps li:first-child > span:before {
    display: none;
  }

  .steps li:first-child i,
  .steps li:last-child i {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border: solid transparent;
    border-left-color: white;
    border-width: 30px;
  }

  .steps li:last-child i {
    left: auto;
    right: -30px;
    border-left-color: transparent;
    border-top-color: white;
    border-bottom-color: white;
  }
}

Answer 4

This method may be the solution you need.

Take a look at this Pen

HTML Code:

<ul class="steps">
  <li class="past">
    <span>
      <strong>Step 1</strong>
    </span><i></i>
  </li>
  <li class="present">
    <span>
      <strong>Step 2</strong>
    </span><i></i>
  </li>
  <li class="future">
    <span>
      <strong>Step 3</strong>
    </span><i></i>
  </li>
  <li class="future1">
    <span>
      <strong>Step 4</strong>
    </span><i></i>
  </li>
  <li class="present1">
    <span>
      <strong>Step 5</strong>
    </span><i></i>
  </li>
</ul>

CSS Styles:

.steps {
  padding-left: 0;
  list-style: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1;
  margin: 30px auto;
  border-radius: 3px;
}

.steps strong {
  font-size: 14px;
  display: block;
  line-height: 2.1;
}

.steps > li {
  position: relative;
  display: block;
  /* border: 1px solid #ddd; */
  padding: 12px 50px 8px 50px;
  width: 140px;
  height: 40px;
}

@media (min-width: 768px) {
  .steps > li {
    float: left;
  }
  .steps .past {
    color: #fff;
    background: blue;
  }
  .steps .present {
    color: #000;
    background: yellow;
  }
  .steps .future {
    color: #fff;
    background: green;
  }
  .steps .present1 {
    color: #000;
    background: red;
  }
  .steps .future1 {
    color: #fff;
    background: purple;
  }
  .steps .present1 {
    color: #fff;
  }

  .steps li > span:after,
  .steps li > span:before {
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    position: absolute;
    top: 0;
    left: 0;
    border: solid transparent;
    border-left-color: #f0f0f0;
    border-width: 30px;
  }

  .steps li > span:after {
    top: -4px;
    z-index: 1;
    border-left-color: white;
    border-width: 34px;
  }

  .steps li > span:before {
    z-index: 2;
  }

  .steps li.past + li > span:before {
    border-left-color: blue;
  }
  .steps li.present + li > span:before {
    border-left-color: yellow;
  }
  .steps li.future + li > span:before {
    border-left-color: green;
  }
  .steps li.future1 + li > span:before {
    border-left-color: purple;
  }

  .steps li:first-child > span:after,
  .steps li:first-child > span:before {
    display: none;
  }

  .steps li:first-child i,
  .steps li:last-child i {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border: solid transparent;
    border-left-color: white;
    border-width: 30px;
  }

  .steps li:last-child i {
    left: auto;
    right: -30px;
    border-left-color: transparent;
    border-top-color: white;
    border-bottom-color: white;
  }
}

Are the CSS flow arrows suffering from poor formatting?

Answer №1

Answer №2

Similar questions

Trouble arises with the background of the HTML body

Using jQuery .each() within a PHP foreach loop: A guide

Guide on integrating jQuery for AJAX responses to gracefully transition into view within an MVC3 View

Adjusting the dimensions of a rectangle using jQuery: A step-by-step guide

What is the best approach to creating a website for a client who needs to incorporate their own Youtube videos?

Is there a way to modify the text within a "span" element that directly follows an "i" element using jQuery?

Font Awesome icons are preventing the navigation bar from collapsing

How you can incorporate an icon in between menu items using Bootstrap 4

Display content from a PHP page inside a Twitter Bootstrap modal

Retrieve the id of the clicked hyperlink and then send it to JQuery

When you add the measurements of two images to the top bar, you get the viewport size

I need to find a way to position my login in the center of the page, even if my HTML body doesn't take up the entire space. This is

Transferring intricate data gracefully through the URL

Cleaning up HTML strings in Angular may strip off attribute formatting

The behavior of -webkit-border-radius differs from that of -moz-border-radius

Programmatically adjusting the color of mask images - Creative image theming

Tips for choosing an option from a react dropdown using Cypress

Modify input value using jQuery upon moving to the next step

Picture in the form of a radio button

Avoid showing an image when it is outside the div container