Responsive CSS arrow bar with transparent borders

Developer
Karsten Buckstegge
Size
2,798 Kb
Views
91,080
  1. Responsive CSS arrow bar with transparent borders Previews
  2. Responsive CSS arrow bar with transparent borders HTML Codes
  3. Responsive CSS arrow bar with transparent borders CSS Codes

How do I make an responsive css arrow bar with transparent borders?

Responsive arrow progress bar with transparent border between each step. Based on the so-answer of jbutler483:. What is a responsive css arrow bar with transparent borders? How do you make a responsive css arrow bar with transparent borders? This script and codes were developed by Karsten Buckstegge on 10 September 2022, Saturday.

Responsive CSS arrow bar with transparent borders Previews
IQ Test

Responsive CSS arrow bar with transparent borders - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive CSS arrow bar with transparent borders</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="progress-nav"> <li class="active">1. GO</li> <li>2. GO</li> <li>3. GO</li>
</ul>
<!--[if IE 8]> <style> li { background: #eee; color: #000 !important; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } li:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } </style>
<![endif]--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Responsive CSS arrow bar with transparent borders - Script Codes CSS Codes

body { background: tomato; background: -webkit-linear-gradient(left, #bada55, tomato); background: linear-gradient(left, #bada55, tomato);
}
.progress-nav { width: 80%; height: 50px; margin: 100px auto; z-index: -2; white-space: nowrap; overflow: hidden; border-radius: 4px;
}
.progress-nav li { margin: 0; height: 50px; width: 35.5%; position: relative; display: inline-block; text-align: center; line-height: 50px; color: #fff; -webkit-transition: color 0.8s; transition: color 0.8s;
}
.progress-nav li:first-child { margin-left: -53px; padding-left: 13px;
}
.progress-nav li:last-child { padding-right: 13%;
}
.progress-nav li:before, .progress-nav li:after { content: ""; position: absolute; -webkit-transition: background 0.8s; transition: background 0.8s; z-index: -1;
}
.progress-nav li:before { height: 50%; width: 100%; top: 0; left: 0; background: rgba(255, 255, 255, 0.2); -webkit-transform: skew(45deg); transform: skew(45deg);
}
.progress-nav li:after { height: 50%; width: 100%; top: 50%; left: 0; background: rgba(255, 255, 255, 0.2); -webkit-transform: skew(-45deg); transform: skew(-45deg);
}
.progress-nav li.active, .progress-nav li.active, .progress-nav li:hover, .progress-nav li:hover { color: blue;
}
.progress-nav li.active:before, .progress-nav li.active:after, .progress-nav li.active:before, .progress-nav li.active:after, .progress-nav li:hover:before, .progress-nav li:hover:after, .progress-nav li:hover:before, .progress-nav li:hover:after { background: rgba(255, 255, 255, 0.6);
}
Responsive CSS arrow bar with transparent borders - Script Codes
Responsive CSS arrow bar with transparent borders - Script Codes
Home Page Home
Developer Karsten Buckstegge
Username MrBambule
Uploaded September 10, 2022
Rating 3
Size 2,798 Kb
Views 91,080
Do you need developer help for Responsive CSS arrow bar with transparent borders?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Karsten Buckstegge (MrBambule) Script Codes
Name
Broken TV
Simple React Slider
The wheel of social
Responsive focuspoint on image with object-position
Scalable animated css menu button
The wheel of social fortune
A Pen by Karsten Buckstegge
SeXy buttons
CSS3 Hover Button
Even More Brokener TV
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!