0

enter image description here

How this one can achieved in CSS. I googled out but i didn't find any solution.

Improve this question
10

4 Answers 4

Reset to default
8

Try this:

HTML

<nav class="nav">
    <ul>
        <li><a href="#">1. Account Info</a></li>
        <li><a href="#">2. Verification</a></li>
        <li><a href="#">3. Enjoy</a></li>
    </ul>
</nav>

StyleSheet

.nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    width: 100%;
}
.nav ul li {
    float: left;
    margin: 0 .2em 0 1em;
}
.nav ul a {
    background: red;
    padding: .3em 1em;
    float: left;
    text-decoration: none;
    color: #fff;
    position: relative;
}
.nav ul li:first-child a:before {
    content: normal;
}
.nav ul li:last-child a:after {
    content: normal;
}
.nav ul a:before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -1.5em;
    border-width: 1.5em 0 1.5em 1em;
    border-style: solid;
    border-color: red rgba(0, 0, 0, 0);
    left: -1em;
    margin-left: 1px;
}
.nav ul a:after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -1.5em;
    border-top: 1.5em solid rgba(0, 0, 0, 0);
    border-bottom: 1.5em solid rgba(0, 0, 0, 0);
    border-left: 1em solid red;
    right: -1em;
    margin-right: 1px;
}

Here is the Demo

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

only FireFox and IE render the arrow tabs OK, but Chrome, Opera (maybe all the webkit-based browsers) and Maxthon render the arrows ugly. Just try the fiddle in Chrome and you'll understand that this is not the best solution. It need more tweaks to render the arrows fine in Chrome, Opera ...
@KingKing If you should have posted your try as answer then it is only acceptable...
2

Try:

HTML:

<div class="arrow">
    <p>1. Acount Info</p>
</div>

<div class="arrow2">
    <p>2. Verification</p>
</div>

<div class="arrow3">
    <p>3. Enjoy</p>
</div>

CSS:

.arrow {
    width: 200px;
    height: 33px;
    background-color: red;
    border: 1px solid red;
    position: relative;
    display:inline-block;
}
.arrow:after {
    content:'';
    position: absolute;
    top: 0px;
    left: 201px;
    width: 0;
    height: 0;
    border: 17px solid transparent;
    border-left: 12px solid red;
}

.arrow2 {
    width: 200px;
    height: 33px;
    background-color: red;
    border: 1px solid red;
    position: relative;
    display: inline-block;
margin-left: 8px;
}
.arrow2:after {
    content:'';
    position: absolute;
    top: 0px;
    left: 201px;
    width: 0;
    height: 0;
    border: 17px solid transparent;
    border-left: 12px solid red;
}


.arrow2:before {
    content:'';
    position: absolute;
    top: 0px;
    left: -1px;
    width: 0;
    height: 0;
    border: 17px solid transparent;
    border-left: 12px solid white;
}

.arrow3 {
    width: 200px;
    height: 33px;
    background-color: red;
    border: 1px solid red;
    position: relative;
    display: inline-block;
margin-left: 8px;
}
.arrow3:before {
    content:'';
    position: absolute;
    top: 0px;
    left: -1px;
    width: 0;
    height: 0;
    border: 17px solid transparent;
    border-left: 12px solid white;
}

p {
    color:white;
    text-align: center;
    margin-top: 6px;
}

And the DEMO

Improve this answer

1 Comment

Really i will appreciate your answer. It will be helpful for responsive designs
2

Here's my attempt: http://codepen.io/anon/pen/xDeCd/

This example works well even if the user changes his font-size or triggers a page zoom. List-items should not break in several lines if the browser is resized.

Screenshot

enter image description here

Markup

<ol>
  <li>1. Account info</li>
  <li>2. Verification</li>
  <li>3. Enjoy</li>
</ol>

(add links if/where necessary, I've just supposed they are not links but simply information labels about the required steps during a process).

Relevant CSS

ol {
  white-space: nowrap;
}

li:after, li:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  position: absolute;
  top: 0;
  width: 1em;
  height: 100%; 
}

li {
  display: inline-block;
  position: relative;
  height: 3em;
  padding: 0 1em;
  margin-right: 3em;
  background: #d12420;
  color: #f0f0f0;
  font: 1em/3em Arial;
}

li + li { margin-left: -1.8em; }


li:not(:last-child):after {
  left: 100%;  
  content: "";

  border-left: 1em  solid #d12420;
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent; 
}

li + li:before {
  content: "";
  right: 100%;

  border-left: 1em  solid #transparent;
  border-top: 1.5em solid #d12420;
  border-bottom: 1.5em solid #d12420;  
}


li:nth-child(1) { z-index: 3; }
li:nth-child(2) { z-index: 2; }
li:nth-child(3) { z-index: 1; }
Improve this answer

Comments

0

Here is some code, it may be useful for you
DEMO

<div class="breadcrumb flat"> <a class="active" href="#">1.Account Verification</a> <a href="#">2.Verification</a> <a href="#">3.Enjoy</a> </div>

Improve this answer

2 Comments

why down voted this answer?? just check the DEMO link
I didn't downvoted but if I have to guess the reason of downvote, it could be related to the choice of the markup and/or the page background that is not visible under the items in the demo

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.