Skip to content

Instantly share code, notes, and snippets.

@jmyrland

jmyrland/ZigZag-edges.markdown

Created March 13, 2014 12:15
Show Gist options
  • Save jmyrland/9527316 to your computer and use it in GitHub Desktop.
Save jmyrland/9527316 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Jørn A. Myrland.
Raw
index.html
<div class="zigzag-edges">
<h2>
Hey, look at my ZigZag!
</h2>
</div>
Raw
style.css
html, body {
background: #8CCEE8;
}
div {
width: 180px;
padding: 2em;
margin: 2em;
}
.zigzag-edges {
position: relative;
background: #FBFBFC;
}
.zigzag-edges:before,
.zigzag-edges:after {
content: ' ';
display: block;
height: 14px;
position: absolute;
left: 0;
right: 0;
}
.zigzag-edges:before{
top: -14px;
background:
linear-gradient(45deg, #FCFCFB 25%, transparent 25%),
linear-gradient(315deg, #FCFCFB 25%, transparent 25%),
linear-gradient(225deg, #8CCEE8 25%, transparent 25%) -7px 0,
linear-gradient(135deg, #8CCEE8 25%, transparent 25%) -7px 0;
background-size: 14px 14px;
background-color: #DCDCDB;
}
.zigzag-edges:after{
bottom: -14px;
background:
linear-gradient(135deg, #FCFCFB 25%, transparent 25%),
linear-gradient(225deg, #FCFCFB 25%, transparent 25%),
linear-gradient(315deg, #8CCEE8 25%, transparent 25%) -7px 0,
linear-gradient(45deg, #8CCEE8 25%, transparent 25%) -7px 0;
background-size: 14px 14px;
background-color: #DCDCDB;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment