Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Pure CSS step navigation with dynamic height arrows
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pure CSS step navigation with dynamic height arrows</title>
<style type="text/css">
* {
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
ul.steps {
list-style-type: none;
width: 100%;
padding-left: 0;
}
ul.steps li {
width: 30%;
position: relative;
float: left;
box-sizing: border-box;
margin-bottom: 20px;
}
ul.steps li .box {
width: 100%;
background-color: #a03b3b;
color: #fff;
padding: 10px;
position: relative;
}
ul.steps li .box a {
color: #fff;
text-decoration: none;
display: block;
}
ul.steps li .box:before,
ul.steps li .box:after {
width: 20px;
height: 50%;
position: absolute;
left: 100%;
content: "";
}
ul.steps li .box:before {
top: 0px;
background: -webkit-linear-gradient(left bottom, #a03b3b 50%, rgba(0, 0, 0, 0) 50%);
background: linear-gradient(to right top, #a03b3b 50%, rgba(0, 0, 0, 0) 50%);
}
ul.steps li .box:after {
top: 50%;
background: -webkit-linear-gradient(left top, #a03b3b 50%, rgba(0, 0, 0, 0) 50%);
background: linear-gradient(to right bottom, #a03b3b 50%, rgba(0, 0, 0, 0) 50%);
}
ul.steps li:not(:last-child) {
margin-right: 30px;
}
ul.steps li h4 {
margin-bottom: 5px;
margin-top: 6px;
font-weight: bold;
color: #a03b3b;
}
ul.steps-content {
list-style-type: initial;
padding-left: 20px;
}
ul.steps-content li {
float: none;
margin-right: 0;
margin-bottom: 8px;
width: 95%;
}
ul.steps-content li:not(:last-child) {
margin-right: 0;
}
@media screen and (max-width:768px) {
ul.steps li:not(: last-child) {
margin-right: 0;
}
ul.steps {
padding-left: 10px;
}
ul.steps li {
width: 93%;
}
}
</style>
</head>
<body>
<ul class="steps">
<li>
<h4>Pre-Arrival</h4>
<div class="box">
<a href="#">
<ul class="steps-content">
<li>Residence permit</li>
<li>Housing</li>
</ul>
</a>
</div>
</li>
<li>
<h4>On-Arrival</h4>
<div class="box">
<a href="#">
<ul class="steps-content">
<li>Childcare &amp; school</li>
<li>Insurance &amp; medical care</li>
<li>Salary &amp; pension</li>
</ul>
</a>
</div>
</li>
<li>
<h4>At destination</h4>
<div class="box">
<a href="#">
<ul class="steps-content">
<li>Danish courses</li>
<li>Dual career &amp; spouse network</li>
</ul>
</a>
</div>
</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.