Welcome to designers blog here i have posted how to design the triangle Menu using CSS3
Step1:
To do triangle menu use the css3 property called before and after .
Step2:
To do this triangle shape we should use the below css class
.menu-navigation .active {
position: relative;
color: #fff !important;
background: #dd052b !important;
float: left;
padding: 0px 15px;
}
.menu-navigation .active:after, .menu-navigation .active:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.menu-navigation .active:after {
border-color: rgba(136, 183, 213, 0);
border-top-color: #dd052b;
border-width: 13px;
margin-left: -13px;
}
.menu-navigation .active:before {
border-width: 36px;
margin-left: -36px;
}
Step3:
HTML Markup:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
ul li {
margin: 0px;
padding: 0px;
list-style-type: none;
}
.menu-navigation {
float: left;
}
.menu-navigation li {
float: left;
margin: 0px 3px 0px 0px;
display: block;
background-color: #d4d4d3;
}
.menu-navigation li a {
font-family: 'Andika', sans-serif;
font-size:14px;
padding: 5px 15px 5px 15px;
float: left;
color: #4c4c4c;
text-decoration: none;
}
.menu-navigation .active {
position: relative;
color: #fff !important;
background: #dd052b !important;
float: left;
padding: 0px 15px;
}
.menu-navigation .active a {
color: #fff !important;
}
.menu-navigation .active:after, .menu-navigation .active:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.menu-navigation .active:after {
border-color: rgba(136, 183, 213, 0);
border-top-color: #dd052b;
border-width: 13px;
margin-left: -13px;
}
.menu-navigation .active:before {
border-width: 36px;
margin-left: -36px;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Andika' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="menu-navigation">
<ul>
<li ><a href="#">Home </a></li>
<li class="active"><a href="#">Domino's</a></li>
<li><a href="#">Toolbox</a></li>
<li><a href="#">Departments</a></li>
</ul>
</div>
</body>
</html>
Step4 :
Out put
No comments:
Post a Comment