nanna-dk/step-by-step-arrows.html

## step-by-step-arrows.html
<!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>
	<!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 & school</li>
	<li>Insurance & medical care</li>
	<li>Salary & 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 & spouse network</li>
	</ul>
	</a>
	</div>
	</li>
	</ul>
	</body>

	</html>