UI Dev
Reputation: 699
Create the triangles in css
How this one can achieved in CSS. I googled out but i didn't find any solution.
Upvotes: 0
Views: 205
Answers (4)
Fabrizio Calderan
Reputation: 123377
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
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; }
Upvotes: 2
laaposto
Reputation: 12213
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
Upvotes: 2
super
Reputation: 2328
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
Upvotes: 8
