How to make this arrow in CSS only?

by

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>

More Related Contents:

  1. I want to get this CSS shape and have a background puicture inside it
  2. Element will not stay centered, especially when re-sizing screen
  3. Responsive grid of hexagons
  4. How to create uneven rounded sides on a div?
  5. CSS Progress Circle
  6. How to use CSS to surround a number with a circle?
  7. Elongated hexagon shaped button using only one element
  8. html/css hexagon with image inside
  9. Easier way to create circle div than using an image?
  10. HTML5 / CSS3 Circle with Partial Border
  11. Create a slanted edge to a div [duplicate]
  12. Draw Circle using css alone [duplicate]
  13. Creating a ‘New’ spiky label with 24 or above point burst
  14. Half circle with CSS (border, outline only)
  15. How to add border to a container with transparent gaps in between
  16. Slanted diagonal line in html or css?
  17. How can I make a 45 degree responsive ribbon with folded corner?
  18. Border with a transparent centred arrow
  19. Add outward curving border to elements like this: ◝◟___◞◜
  20. How to create a curved speech bubble?
  21. How can I make a div with irregular shapes with css3 and html5?
  22. How can I create a wavy shape CSS?
  23. How to Make A Chevron Arrow Using CSS?
  24. div with triangle at the bottom with background image
  25. Responsive CSS Circles
  26. CSS Zigzag Border with a Textured Background
  27. How do I create a teardrop in HTML?
  28. How to transform each side of a shape separately?
  29. How to create a ribbon shape in CSS
  30. Create wavy borders in CSS for top and bottom borders

Leave a Comment