Skip to content

Instantly share code, notes, and snippets.

@wwsun

wwsun/index.html

Last active May 11, 2016 12:49
Show Gist options
  • Save wwsun/6721db741e2ff9a5d284f5c643301a2d to your computer and use it in GitHub Desktop.
Save wwsun/6721db741e2ff9a5d284f5c643301a2d to your computer and use it in GitHub Desktop.
Download ZIP
css: nav-arrow
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="arrow-right"></div>
<div class="arrow-left"></div>
<div class="arrow"></div>
<br>
<br>
<div class="nav-arrow"></div>
</body>
</html>
Raw
main.css
.arrow-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid green;
}
.arrow-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 50px solid blue;
}
.arrow {
width: 0;
height: 0;
border-top: 60px solid red;
border-bottom: 60px solid black;
border-right: 60px solid green;
border-left: 60px solid blue;
}
.nav-arrow {
position: relative;
left: 50px;
height: 50px;
width: 150px;
background: green;
}
.nav-arrow:before {
content: '';
position: absolute;
top: 0;
left: -25px;
z-index: 1;
width: 0;
height: 0;
border-top: 25px solid green;
border-bottom: 25px solid green;
border-right: 25px solid transparent;
border-left: 25px solid transparent;
}
.nav-arrow:after {
content: '';
position: absolute;
top: 0;
right: -25px;
z-index: 1;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid green;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment