Skip to content

Instantly share code, notes, and snippets.

@arup-b

arup-b/Zigzag Horizontal Rule.markdown

Created August 29, 2015 05:47
Show Gist options
  • Save arup-b/c26e7d5c474b7529f5d5 to your computer and use it in GitHub Desktop.
Save arup-b/c26e7d5c474b7529f5d5 to your computer and use it in GitHub Desktop.
Download ZIP
Zigzag Horizontal Rule
Raw
index.html
<hr class="zig">
<hr class="zag">
<!-- forked from http://blog.eliacontini.info/post/42743847160/notes-on-css3-box-with-zig-zag-border*/ -->
Raw
style.css
hr.zig, hr.zag {
border: none;
height: 30px;
margin: 0 50px;
}
hr.zig{
background: linear-gradient(-135deg, #FFF 20px, rgba(0, 0, 0, 0) 0) 0 5px, linear-gradient(135deg, #FFF 20px, rgba(0, 0, 0, 0) 0) 0 5px;
background-color: rgba(0, 0, 0, 0);
background-position: center bottom;
background-repeat: repeat-x;
background-size: 20px 40px;
z-index: 100;
position: relative;
}
hr.zag {
background: linear-gradient(-135deg, #333 20px, rgba(0, 0, 0, 0) 0) 0 5px, linear-gradient(135deg, #333 20px, #FFF 0) 0 5px;
background-color: rgba(0, 0, 0, 0);
background-position: center bottom;
background-repeat: repeat-x;
background-size: 20px 40px;
z-index: 50;
margin-top: -28px;
}
Raw
Zigzag Horizontal Rule.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment