Login/Register
How to make this arrow in CSS only?
Asked Answered
Solved htmlcsscss-shapes
I

5

24

I'm building a wizard-like ordering process where I have this menu: menu

The active page is colored green (in this case, Model).

How does one make this arrow using only CSS?:

arrow

At the moment i'm achieving my goal by using several divs and images:

<div class="menuItem">
    <div></div> <!-- The left image -->
    <div>Varianten</div>
    <div></div> <!-- The right image -->
</div>

The left image: enter image description here

The right image:enter image description here

I found a SO answer which does part of this: Arrow Box with CSS, however i'm having trouble with the indent at the left.

If you have a better idea about how to do this, please let me know!

Infusion answered 24/12, 2014 at 11:41 Comment(4)
check this: Shapes in css – Mclellan
Do you need the space between each button to be transparent? Or can it be white? – Romanticize
same shape here : #20502691 – Shirtmaker
possible duplicate of Achieving arrow-like shapes in a banner in CSS – Hybridize
B
37

If the space between the arrows does not need to be transparent (it is solid color) you can use the :before and :after to create the edges (without new elements in DOM)

Basically, it creates rotated squares with the borders we want and places them accordingly

#flowBoxes {
    margin:auto;
    padding:20px;
    min-width:700px;

}
#flowBoxes div {
    display:inline-block;
    position:relative;
    height:25px;
    line-height:25px;
    padding:0 20px;
    border:1px solid #ccc;
    margin-right:2px;
    background-color:white;
}

#flowBoxes div.right:after{
    content:'';
    border-top:1px solid #ccc;
    border-right:1px solid #ccc;
    width:18px;
    height:18px;
    position:absolute;
    right:0;
    top:-1px;
    background-color:white;
    z-index:150;
    
    -webkit-transform: translate(10px,4px) rotate(45deg);
       -moz-transform: translate(10px,4px) rotate(45deg);
        -ms-transform: translate(10px,4px) rotate(45deg);
         -o-transform: translate(10px,4px) rotate(20deg); 
            transform: translate(10px,4px) rotate(45deg);
}

#flowBoxes div.left:before{
    content:'';
    border-top:1px solid #ccc;
    border-right:1px solid #ccc;
    width:18px;
    height:18px;
    position:absolute;
    left:0;
    top:-1px;
    background-color:white;
    z-index:50;
    
    -webkit-transform: translate(-10px,4px) rotate(45deg);
       -moz-transform: translate(-10px,4px) rotate(45deg);
        -ms-transform: translate(-10px,4px) rotate(45deg);
         -o-transform: translate(-10px,4px) rotate(20deg);
            transform: translate(-10px,4px) rotate(45deg);
}
#flowBoxes .active{
    background-color:green;
    color:white;
}
#flowBoxes div.active:after{
    background-color:green;
}
<div id="flowBoxes">
        <div class="right">Diersoort / I&amp;R</div>
        <div class="left right active">Model</div>
        <div class="left right">Varianten</div>
        <div class="left right">Bedrukkingen</div>
        <div class="left">Bevestiging</div>
</div>
Blythe answered 24/12, 2014 at 11:51 Comment(5)
Perfect answer. In my case the space between the arrows doesn't have to be transparent, but i imagine it could be useful to others. Is it possible to make the spaces transparent? – Infusion
Being picky but why not use :nth-child pseudo classes instead of CSS classes to target first and last elements? + -o- and -moz- prefixes for the transform property aren't realy necessary anymore. – Shirtmaker
@Shirtmaker if you hover over the browsers versions you will see that many require the prefix. As for the nth-child you are right, but i wanted more flexibility on what you set (and if they are all under the same container..) – Blythe
Previous versions do require prefixes! FF 3.5 to 15 requires -moz- and Opera 11.5 requires -o- – Ullund
Perfect one this really worked for the flat stricture on the left i added ` #flowBoxes div.left{ margin-left:-5px; border-left:transparent 0px none; } ` and removed the ` #flowBoxes div.right:after ` block – Bently
H
16

Here is an alternate approach to the whole thing using CSS3 features. One advantage of using this method (and one of the main reasons for adding a separate answer) is that the space in between the arrows can be transparent.

Basically the implementation is as follows:

  1. There is one div for each step/item and it contains the text that needs to be displayed. Let us say the height of this div is x (50px in this example).
  2. Two pseudo-elements (:before and :after) are created with their width the same as the parent div and height as half (x/2) of the parent. The :before element has no border-bottom whereas the :after element has no border-top to avoid a line appearing in the middle of the shape (parallel to x-axis).
  3. These two pseudo-elements are then skew transformed in opposite directions and are positioned in such a way that they are directly below each other and thus ends up forming the required shape.
  4. The pseudo-elements are assigned a negative z-index to push them to be behind the parent div (and therefore its text).
  5. The first-child and the last-child elements are modified slightly (left position, border of pseudo-elements, background and border of parent div) to achieve the straight sides.
  6. We can add an active class for active elements and hover effects also to the shapes like in the below sample. 

.steps {
  height: 50px;
  width: 150px;
  text-align: center;
  line-height: 50px;
  position: relative;
  margin: 10px 0px 10px 20px;
  display: inline-block;
}
.steps:before,
.steps:after {
  content: '';
  position: absolute;
  left: 0px;
  width: 150px;
  height: 25px;
  z-index: -1;
}
.steps:before {
  top: -2px;
  border-top: 2px solid blue;
  border-right: 2px solid blue;
  border-left: 2px solid blue;
  background: lightblue;
  -moz-transform: skew(30deg);
  -webkit-transform: skew(30deg);
  transform: skew(30deg);
}
.steps:after {
  bottom: -2px;
  border-left: 2px solid blue;
  border-right: 2px solid blue;
  border-bottom: 2px solid blue;
  background: lightblue;
  -moz-transform: skew(-30deg);
  -webkit-transform: skew(-30deg);
  transform: skew(-30deg);
}
.steps:last-child {
  background: lightblue;
  border-right: 2px solid blue;
  border-top: 2px solid blue;
  border-bottom: 2px solid blue;
  margin-left: 38px;
}
.steps:first-child {
  background: lightblue;
  border-left: 2px solid blue;
  border-top: 2px solid blue;
  border-bottom: 2px solid blue;
  margin-right: 18px;
}
.steps:first-child:before,
.steps:first-child:after {
  left: 18px;
}
.steps:last-child:before,
.steps:last-child:after {
  left: -18px;
}
/* Hover Styles */

.steps:first-child:hover,
.steps:last-child:hover,
.steps:hover:before,
.steps:hover:after {
  background: lightgreen;
}
.steps:first-child:hover {
  border-left: 2px solid green;
}
.steps:last-child:hover {
  border-right: 2px solid green;
}
.steps:hover:before {
  border-top: 2px solid green;
  border-right: 2px solid green;
  border-left: 2px solid green;
}
.steps:hover:after {
  border-left: 2px solid green;
  border-right: 2px solid green;
  border-bottom: 2px solid green;
}
.steps:first-child:hover,
.steps:last-child:hover {
  border-top: 2px solid green;
  border-bottom: 2px solid green;
}

/* Active Styles */

.active:first-child,
.active:last-child,
.active:before, 
.active:after{
  background: bisque;
}
.active:first-child{
  border-left: 2px solid red;
}
.active:last-child{
  border-right: 2px solid red;
}
.active:before{
  border-top: 2px solid red;
  border-right: 2px solid red;
  border-left: 2px solid red;
}
.active:after{
  border-left: 2px solid red;
  border-right: 2px solid red;
  border-bottom: 2px solid red;
}
.active:first-child, .active:last-child{
  border-top: 2px solid red;
  border-bottom: 2px solid red;
}

/* Just for creating a non solid color background */
body{
  height: 200px;
  background: -webkit-radial-gradient(center, ellipse, #400, #100);
  background: -moz-radial-gradient(center, ellipse, #400, #100);
  background: radial-gradient(center, ellipse, #400, #100);
}
<div class='steps-container'>
  <div class='steps'>1. Step 1</div>
  <div class='steps active'>2. Step 2</div>
  <div class='steps'>3. Step 3</div>
</div>

Note: The hover in the above snippet doesn't work when hovering on the right tip of the first-child or the left tip of the last-child because of z-index issues. If you need seamless hover functionality then using a span inside the .steps element like in the below snippet would solve it. (Thanks to The Pragmatick for pointing this out).

.steps {
  height: 50px;
  width: 150px;
  text-align: center;
  line-height: 50px;
  position: relative;
  margin: 10px 0px 10px 20px;
  display: inline-block;
}
.steps span {
  position: relative;
  z-index: 2;
}
.steps:before,
.steps:after {
  content: '';
  position: absolute;
  left: 0px;
  width: 150px;
  height: 25px;
}
.steps:before {
  top: -2px;
  border-top: 2px solid blue;
  border-right: 2px solid blue;
  border-left: 2px solid blue;
  background: lightblue;
  -moz-transform: skew(30deg);
  -webkit-transform: skew(30deg);
  transform: skew(30deg);
}
.steps:after {
  bottom: -2px;
  border-left: 2px solid blue;
  border-right: 2px solid blue;
  border-bottom: 2px solid blue;
  background: lightblue;
  -moz-transform: skew(-30deg);
  -webkit-transform: skew(-30deg);
  transform: skew(-30deg);
}
.steps:first-child:before,
.steps:first-child:after {
  border-left: none;
}
.steps:last-child:before,
.steps:last-child:after {
  border-right: none;
}
.steps:last-child {
  background: lightblue;
  border-right: 2px solid blue;
  border-top: 2px solid blue;
  border-bottom: 2px solid blue;
  margin-left: 38px;
}
.steps:first-child {
  background: lightblue;
  border-left: 2px solid blue;
  border-top: 2px solid blue;
  border-bottom: 2px solid blue;
  margin-right: 18px;
}
.steps:first-child:before,
.steps:first-child:after {
  left: 18px;
}
.steps:last-child:before,
.steps:last-child:after {
  left: -18px;
}
/* Hover Styles */

.steps:first-child:hover,
.steps:last-child:hover,
.steps:hover:before,
.steps:hover:after {
  background: lightgreen;
}
.steps:first-child:hover {
  border-left: 2px solid green;
}
.steps:last-child:hover {
  border-right: 2px solid green;
}
.steps:hover:before {
  border-top: 2px solid green;
  border-right: 2px solid green;
  border-left: 2px solid green;
}
.steps:hover:after {
  border-left: 2px solid green;
  border-right: 2px solid green;
  border-bottom: 2px solid green;
}
.steps:first-child:hover,
.steps:last-child:hover {
  border-top: 2px solid green;
  border-bottom: 2px solid green;
}
.steps:first-child:hover:before,
.steps:first-child:hover:after {
  border-left: none;
}
.steps:last-child:hover:before,
.steps:last-child:hover:after {
  border-right: none;
}
/* Active Styles */

.active:first-child,
.active:last-child,
.active:before,
.active:after {
  background: bisque;
}
.active:first-child {
  border-left: 2px solid red;
}
.active:last-child {
  border-right: 2px solid red;
}
.active:before {
  border-top: 2px solid red;
  border-right: 2px solid red;
  border-left: 2px solid red;
}
.active:after {
  border-left: 2px solid red;
  border-right: 2px solid red;
  border-bottom: 2px solid red;
}
.active:first-child,
.active:last-child {
  border-top: 2px solid red;
  border-bottom: 2px solid red;
}
/* Just for creating a non solid color background */

body {
  height: 200px;
  background: -webkit-radial-gradient(center, ellipse, #400, #100);
  background: -moz-radial-gradient(center, ellipse, #400, #100);
  background: radial-gradient(center, ellipse, #400, #100);
}
<div class='steps-container'>
  <div class='steps'>
    <span>1. Step 1</span>
  </div>
  <div class='steps active'>
    <span>2. Step 2</span>
  </div>
  <div class='steps'>
    <span>3. Step 3</span>
  </div>
</div>

Screenshot: (with the hover on second item)

enter image description here

Responsive Implementation with Transparent Background:

For a responsive version of the progress tracker bar with semi-transparent boxes, visit this pen. The width of each step/item is assigned in such a way that their sum is always 100% of the available width and each itemis always of the same size as the others.

JavaScript is used for the following features: (All these features are value-add and can be removed depending on the needs. Note that when the JS is removed, the corresponding CSS properties should be put into the CSS file.)

  • Automatically adjust the width of each item depending on the no. of items that are present in the bar
  • Automatically adjust the width of each item when the window is resized
  • Automatically adjust the appearance of the items when the height of the bar is increased or decreased by using the slider.

enter image description here

Hooey answered 28/1, 2015 at 15:54 Comment(0)
H
8

Here's some great arrows for you

html{
  background-color:red;
  }
div#page {
    padding-bottom: 40px;
    padding-top: 40px;
    text-align: center;
    z-index: 1;
    position: relative;
}
div.diamond, div.ribbon, div.right-arrow, div.left-arrow {
    display: inline-block;
    color: #FFFFFF;
    font-size: 22px;
    line-height: 38px;
    margin: 15px 0;
    position: relative;
    width: 200px;
}
div.diamond:before, div.diamond:after, div.ribbon:before, div.ribbon:after, div.right-arrow:before, div.right-arrow:after, div.left-arrow:before, div.left-arrow:after {
    content:"";
    border-style: solid;
    border-width: 0;
    height: 0;
    position: absolute;
    width: 0;
}
div.diamond {
    background-color: #CCCCCC;
}
div.diamond:after, div.diamond:before {
    border-color: transparent #CCCCCC;
}
div.diamond:before {
    left: -19px;
    border-width: 19px 19px 19px 0;
}
div.diamond:after {
    right: -19px;
    border-width: 19px 0 19px 19px;
}
div.ribbon {
    background-color: #CCCCCC;
}
div.ribbon:before, div.ribbon:after {
    top: 6px;
    z-index: -15;
}
div.ribbon:before {
    border-color: #B2B2B2 #B2B2B2 #B2B2B2 transparent;
    border-width: 19px;
    left: -25px;
}
div.ribbon:after {
    border-color: #B2B2B2 transparent #B2B2B2 #B2B2B2;
    border-width: 19px;
    right: -25px;
}
div.right-arrow {
    background-color: #CCCCCC;
}
div.right-arrow:after, div.right-arrow:before {
    border-width: 19px 0 19px 19px;
}
div.right-arrow:before {
    border-color: #CCCCCC transparent;
    left: -19px;
}
div.right-arrow:after {
    border-color: transparent #CCCCCC;
    right: -19px;
}
div.left-arrow {
    background-color: #CCCCCC;
}
div.left-arrow:after, div.left-arrow:before {
    border-width: 19px 19px 19px 0;
}
div.left-arrow:before {
    border-color: transparent #CCCCCC;
    left: -19px;
}
div.left-arrow:after {
    border-color: #CCCCCC transparent;
    right: -19px;
}
<div id="page">
    <div class="diamond">Diamond</div>
    <br>
    <div class="ribbon">Ribbon</div>
    <br>
    <div class="right-arrow">Right arrow</div>
    <br>
    <div class="left-arrow">Left arrow</div>
</div>

SOURCE

Note

this also allows gradient backgrounds/etc

For other shapes, I saw this codepen the other day, too

Hybridize answered 24/12, 2014 at 12:3 Comment(0)
U
4

If you want transparent spaces between tabs, Harry's current answer is they way to go.

But if you want to remove hover issues, you can try the following. It uses box-shadow for pseudo-elements instead of background with solid colour.
The same effect is achievable using border: _px inset #___ ;

.li {
    height: 50px;
    width: 120px;
    background: #F5FBF1;
    display: inline-block;
    position: relative;
    margin-left: 30px;
    line-height: 50px;
    color: black;
    font-family: sans-serif;
    text-align: center;
}
.li:before, .li:after {
    content: '';
    left: -15px;
    position: absolute;
    height: 23px;
    width: 132px;
    border-left: 2px solid black;
    border-right: 2px solid black;
}
.li:before {
    border-top: 2px solid black;
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: skewX(30deg);
    -moz-transform: skewX(30deg);
    -ms-transform: skewX(30deg);
    transform: skewX(30deg);
    top: 0;
    box-shadow: inset 0 8px 0 8px #F5FBF1, inset -6px 8px 0 8px #F5FBF1;
}
.li:after {
    border-bottom: 2px solid black;
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: skewX(-30deg);
    -moz-transform: skewX(-30deg);
    -ms-transform: skewX(-30deg);
    transform: skewX(-30deg);
    bottom: 0;
    box-shadow: inset 0 -8px 0 8px #F5FBF1, inset -6px -8px 0 8px #F5FBF1;
}
.li:hover {
    background: #C0EBA4;
}
.li:hover:before {
    box-shadow: inset 0 8px 0 8px #C0EBA4, inset -6px 8px 0 8px #C0EBA4;
}
.li:hover:after {
    box-shadow: inset 0 -8px 0 8px #C0EBA4, inset -6px -8px 0 8px #C0EBA4;
}
<div class="li">ONE</div>
<div class="li">TWO</div>
<div class="li">THREE</div>
<div class="li">FOUR</div>
<div class="li">FIVE</div>

FIDDLE

Final version

You can hover it seamlessly. It includes flat edges of first and last tabs. 

.li {
    height: 50px;
    width: 100px;
    padding-left: 20px;
    background: #F5FBF1;
    display: inline-block;
    position: relative;
    margin-left: 20px;
    line-height: 50px;
    font-family: sans-serif;
    font-size: 15px;
}
.li:before, .li:after {
    content: '';
    left: -15px;
    position: absolute;
    height: 23px;
    width: 132px;
    border-left: 2px solid black;
    border-right: 2px solid black;
}
.li:before {
    border-top: 2px solid black;
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: skewX(30deg);
    -moz-transform: skewX(30deg);
    -ms-transform: skewX(30deg);
    transform: skewX(30deg);
    top: 0;
    box-shadow: inset 0 8px 0 8px #F5FBF1, inset -6px 8px 0 8px #F5FBF1;
}
.li:after {
    border-bottom: 2px solid black;
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: skewX(-30deg);
    -moz-transform: skewX(-30deg);
    -ms-transform: skewX(-30deg);
    transform: skewX(-30deg);
    bottom: 0;
    box-shadow: inset 0 -8px 0 8px #F5FBF1, inset -6px -8px 0 8px #F5FBF1;
}
.li:hover {
    background: #C0EBA4;
}
.li:hover:before { box-shadow: inset 0 8px 0 8px #C0EBA4, inset -6px 8px 0 8px #C0EBA4;}
.li:hover:after { box-shadow: inset 0 -8px 0 8px #C0EBA4, inset -6px -8px 0 8px #C0EBA4;}

/*First and Last styles*/
.li:first-of-type {
    left: -15px;
    box-shadow: 15px 0 0 0 #F5FBF1;
    border-left: 2px solid black;
}
.li:first-of-type:before, .li:first-of-type:after {
    left: -1px;
    width: 135px;
    border-left: 0;
}
.li:first-of-type:hover {box-shadow: 15px 0 0 0 #C0EBA4;}
.li:last-of-type {
    left: 0px;
    width: 115px;
    box-shadow: inset -2px 0 0 0 black, inset 0 -2px 0 0 black, inset 0 2px 0 0 black;
    border: 0;
}
.li:last-of-type:before, .li:last-of-type:after {
    left: -15px;
    border-right: 0;
}
.li:last-of-type:hover {background: #C0EBA4;}
<div class="li">Tab one</div>
<div class="li">Tab two</div>
<div class="li">Tab three</div>
<div class="li">Tab four</div>
<div class="li">Tab five</div>

FIDDLE (final)

Output:

enter image description here

Ullund answered 26/2, 2015 at 15:19 Comment(0)
A
-1

Update

See this repl for added top-down support.

Screenshot (top-down)

Initial answer

I set up a repl with an highly customizable example using CSS's clip-path. See here.

Screenshot

<script>
    let arrowWidth = 25;
    let stepPaddingX = 25;
    let stepPaddingY = 0;
    let stepGap = 5;
    let height = 50;
    
    $: cssVariables = `--height: ${height}px;--step-gap: ${stepGap}px;--arrow-width: ${arrowWidth}px; --step-padding-x: ${stepPaddingX}px; --step-padding-y: ${stepPaddingY}px`;
    
    let wrap = false;
    let wrapWords = true;
    let pillStyle = true;
    let limitHeight = false;
    let autoHeight = true;
    
    const steps = ["Test", "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam", "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam", "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam", "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam"]
</script>

<div class="settings">
    <div class="setting">
        <label for="setting__height">Height</label>
        <input id="setting__height" min="50" max="200" bind:value={height} type="range"/>
    </div>
    <div class="setting">
        <label for="setting__limit-height">Limit height</label>
        <input id="setting__limit-height" bind:checked={limitHeight} type="checkbox"/>
    </div>
    <div class="setting">
        <label for="setting__auto-height">Auto-height</label>
        <input id="setting__auto-height" bind:checked={autoHeight} type="checkbox"/>
    </div>
    <div class="setting">
        <label for="setting__arrow-width">Arrow width</label>
        <input id="setting__arrow-width" bind:value={arrowWidth} type="range"/>
    </div>
    <div class="setting">
        <label for="setting__step-padding-y">Step Padding Y</label>
        <input id="setting__step-padding-y" bind:value={stepPaddingY} type="range"/>
    </div>
    <div class="setting">
        <label for="setting__step-padding-x">Step Padding X</label>
        <input id="setting__step-padding-x" bind:value={stepPaddingX} type="range"/>
    </div>
    <div class="setting">
        <label for="setting__step-gap">Step Gap</label>
        <input id="setting__step-gap" bind:value={stepGap} type="range"/>
    </div>
    <div class="setting">
        <label for="setting__wrap-steps">Wrap steps</label>
        <input id="setting__wrap-steps" bind:checked={wrap} type="checkbox"/>
    </div>
    <div class="setting">
        <label for="setting__wrap-words">Wrap words</label>
        <input id="setting__wrap-words" bind:checked={wrapWords} type="checkbox"/>
    </div>
    <div class="setting">
        <label for="setting__pill-style">Pill style</label>
        <input id="setting__pill-style" bind:checked={pillStyle} type="checkbox"/>
    </div>
</div>
<div class="steps" class:wrap class:pillStyle class:limitHeight class:autoHeight style={cssVariables}>
    {#each steps as step}
        <div class="step" class:wrapWords>
            {step}
        </div>
    {/each}
</div>

<style>
    
    :global(body){
        --arrow-width: 25px;
        --step-gap: 5px;
        --step-padding-x: 10px;
        --height: 50px;
    }
    
    .settings {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    
    .setting {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        border: 1px solid #333;
        border-radius: 5px;
        padding: 0.25rem;
        width: max-content;
    }
    
    input {
        margin: 0;
    }
    
    .steps.pillStyle .step:first-of-type {
        border-top-left-radius: 99999px;
        border-bottom-left-radius: 99999px;
    }
    
    .steps.pillStyle .step:last-of-type {
        border-top-right-radius: 99999px;
        border-bottom-right-radius: 99999px;
    }
    
    .steps {
        display: flex;
        gap: var(--step-gap);
        overflow-x: scroll;
        /*scrollbar-width: none;*/
        padding: 1rem 0;
    }
    
    .steps.wrap {
        flex-wrap: wrap;
    }
    
    .steps.limitHeight .step{
        max-height: 50px;
    }
    
    .steps.autoHeight .step{
        height: unset;
    }
    
    .step:not(.wrapWords) {
        white-space: nowrap;
    }
    
    .step {
        background: #756bea;
        width: auto;
        height: var(--height);
        color: #fff;
        transform-style: preserve-3d;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: var(--step-padding-y) var(--step-padding-x);
        box-sizing: border-box;
    }
    
    .step:hover{
        background: #4b3fe4;
    }
    
    .step:first-child {
        /*padding-right: var(--arrow-width);*/
        /*padding-left: var(--step-padding-x);*/
    }
    
    .step:first-child::after {
        content: "";
        background: inherit;
        position: absolute;
        left: 100%;
        width: var(--arrow-width);
        height: 100%;
        clip-path: polygon(calc(100% - var(--arrow-width)) 0%, 100% 50%, calc(100% - var(--arrow-width)) 100%, 0% 100%, 0% 0%);
    }
    
    .step:not(:is(:first-child, :last-child))::before{
        content: "";
        background: inherit;
        position: absolute;
        right: 100%;
        width: var(--arrow-width);
        height: 100%;
        clip-path: polygon(100% 0%, 100% 100%, 0% 100%, var(--arrow-width) 50%, 0% 0%);
    }
    
    .step:not(:is(:first-child, :last-child))::after {
        content: "";
        background: inherit;
        position: absolute;
        left: 100%;
        width: var(--arrow-width);
        height: 100%;
        clip-path: polygon(calc(100% - var(--arrow-width)) 0%, 100% 50%, calc(100% - var(--arrow-width)) 100%, 0% 100%, 0% 0%);
    }
    
    .step:not(:last-child) {
        margin-right: var(--arrow-width);
        padding-left: var(--step-padding-x);
    }
    
    .step:last-child {
        padding-left: var(--step-padding-x);
        padding-right: var(--step-padding-x);
    }
    
    .step:last-child::before {
        content: "";
        background: inherit;
        position: absolute;
        right: 100%;
        width: var(--arrow-width);
        height: 100%;
        clip-path: polygon(100% 0, 100% 100%, 0% 100%, var(--arrow-width) 50%, 0% 0%);
    }
</style>

If you want a border for the steps look at this repl

<script>
        let wrap = false;
    let wrapWords = true;
    let pillStyle = true;
    let limitHeight = false;
    let autoHeight = true;
        let lockBorderToGap = false;
    
    let arrowWidth = 25;
    let stepPaddingX = 25;
    let stepPaddingY = 0;
    let stepGap = 5;
    let height = 50;
        let stepBorderWidth = 5;
    
    $: cssVariables = `--height: ${height}px;--step-gap: ${stepGap}px;--arrow-width: ${arrowWidth}px; --step-padding-x: ${stepPaddingX}px; --step-padding-y: ${stepPaddingY}px; --step-border-width: ${stepBorderWidth}px`;
    
    const steps = ["Test", "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam", "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam", "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam", "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam"]
</script>

<div class="settings">
    <div class="setting">
        <label for="setting__height">Height</label>
        <input id="setting__height" min="50" max="200" bind:value={height} type="range"/>
    </div>
    <div class="setting">
        <label for="setting__limit-height">Limit height</label>
        <input id="setting__limit-height" bind:checked={limitHeight} type="checkbox"/>
    </div>
    <div class="setting">
        <label for="setting__auto-height">Auto-height</label>
        <input id="setting__auto-height" bind:checked={autoHeight} type="checkbox"/>
    </div>
    <div class="setting">
        <label for="setting__arrow-width">Arrow width</label>
        <input id="setting__arrow-width" bind:value={arrowWidth} type="range"/>
    </div>
    <div class="setting">
        <label for="setting__step-padding-y">Step Padding Y</label>
        <input id="setting__step-padding-y" bind:value={stepPaddingY} type="range"/>
    </div>
    <div class="setting">
        <label for="setting__step-padding-x">Step Padding X</label>
        <input id="setting__step-padding-x" bind:value={stepPaddingX} type="range"/>
    </div>
    <div class="setting">
        <label for="setting__step-gap">Step Gap</label>
        <input id="setting__step-gap" bind:value={stepGap} type="range"/>
    </div>
        <div class="setting">
        <label for="setting__lock-border">Lock border to gap</label>
        <input id="setting__lock-border" bind:checked={lockBorderToGap} type="checkbox"/>
    </div>
    <div class="setting">
        <label for="setting__wrap-steps">Wrap steps</label>
        <input id="setting__wrap-steps" bind:checked={wrap} type="checkbox"/>
    </div>
    <div class="setting">
        <label for="setting__wrap-words">Wrap words</label>
        <input id="setting__wrap-words" bind:checked={wrapWords} type="checkbox"/>
    </div>
    <div class="setting">
        <label for="setting__pill-style">Pill style</label>
        <input id="setting__pill-style" bind:checked={pillStyle} type="checkbox"/>
    </div>
</div>
<div id="example" style={cssVariables}>
    <div class="steps-wrapper" class:lockBorderToGap>
        <div class="steps" class:wrap class:pillStyle class:limitHeight class:autoHeight>
                {#each steps as step}
                        <div class="step" class:wrapWords>
                                {step}
                        </div>
                {/each}
        </div>
    </div>
</div>
<style>
    :global(body){
        --arrow-width: 25px;
        --step-gap: 5px;
        --step-padding-x: 10px;
        --height: 50px;
                --step-border-width: 5px;
    }
    
    .settings {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
                margin-bottom: 2rem;
    }
    
    .setting {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        border: 1px solid #333;
        border-radius: 5px;
        padding: 0.25rem;
        width: max-content;
    }
    
    input {
        margin: 0;
    }
    
    .steps.pillStyle .step:first-of-type {
        border-top-left-radius: 99999px;
        border-bottom-left-radius: 99999px;
    }
    
    .steps.pillStyle .step:last-of-type {
        border-top-right-radius: 99999px;
        border-bottom-right-radius: 99999px;
    }
    
        .steps-wrapper {
            /*padding: 0.5rem;*/
            box-sizing: border-box;
            background: black;
            border-radius: 99999px;
            overflow: hidden;
            border: var(--step-border-width) solid transparent;
        }
    
        .steps-wrapper.lockBorderToGap {
            border-width: var(--step-gap);
        }
    
    .steps {
            display: flex;
            gap: var(--step-gap);
            overflow-x: scroll;
            scrollbar-width: none;
            /*padding: 1rem 0;*/
    }
    
    .steps.wrap {
        flex-wrap: wrap;
    }
    
    .steps.limitHeight .step{
        max-height: 50px;
    }
    
    .steps.autoHeight .step{
        height: unset;
    }
    
    .step:not(.wrapWords) {
        white-space: nowrap;
    }
    
    .step {
        background: #756bea;
        width: auto;
        height: var(--height);
        color: #fff;
        transform-style: preserve-3d;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: var(--step-padding-y) var(--step-padding-x);
        box-sizing: border-box;
    }
    
    .step:hover{
        background: #4b3fe4;
    }
    
    .step:first-child {
        /*padding-right: var(--arrow-width);*/
        /*padding-left: var(--step-padding-x);*/
    }
    
    .step:first-child::after {
        content: "";
        background: inherit;
        position: absolute;
        left: 100%;
        width: var(--arrow-width);
        height: 100%;
        clip-path: polygon(calc(100% - var(--arrow-width)) 0%, 100% 50%, calc(100% - var(--arrow-width)) 100%, 0% 100%, 0% 0%);
    }
    
    .step:not(:is(:first-child, :last-child))::before{
        content: "";
        background: inherit;
        position: absolute;
        right: 100%;
        width: var(--arrow-width);
        height: 100%;
        clip-path: polygon(100% 0%, 100% 100%, 0% 100%, var(--arrow-width) 50%, 0% 0%);
    }
    
    .step:not(:is(:first-child, :last-child))::after {
        content: "";
        background: inherit;
        position: absolute;
        left: 100%;
        width: var(--arrow-width);
        height: 100%;
        clip-path: polygon(calc(100% - var(--arrow-width)) 0%, 100% 50%, calc(100% - var(--arrow-width)) 100%, 0% 100%, 0% 0%);
    }
    
    .step:not(:last-child) {
        margin-right: var(--arrow-width);
        padding-left: var(--step-padding-x);
    }
    
    .step:last-child {
        padding-left: var(--step-padding-x);
        padding-right: var(--step-padding-x);
    }
    
    .step:last-child::before {
        content: "";
        background: inherit;
        position: absolute;
        right: 100%;
        width: var(--arrow-width);
        height: 100%;
        clip-path: polygon(100% 0, 100% 100%, 0% 100%, var(--arrow-width) 50%, 0% 0%);
    }
</style>
Ailin answered 23/9, 2022 at 20:7 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.