Skip to content

Instantly share code, notes, and snippets.

@SynCap

SynCap/css3-lineart-the-page-icon.markdown

Created August 23, 2016 16:58
Show Gist options
  • Save SynCap/9da93fea7ce5f279269172e6f0540fc3 to your computer and use it in GitHub Desktop.
Save SynCap/9da93fea7ce5f279269172e6f0540fc3 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3: LineArt - the page icon
Raw
css3-lineart-the-page-icon.markdown

CSS3: LineArt - the page icon

One block element styled as icon. No additional markup, just CSS.

A Pen by SynCap on CodePen.

License.

Raw
style.less
.page {
position: relative;
z-index: 1;
width: 210px;
height: 297px;
margin: 30px auto;
border: 2px solid #05c;
&:before {
position: absolute;
z-index: 2;
right: 0;
display: block;
width: 32px;
height: 32px;
content: '';
border-bottom: 2px solid #05c;
border-left: 2px solid #05c;
background: #ccc;
}
&:after {
position: absolute;
z-index: 3;
top: -27px;
right: -26px;
display: block;
width: 50px;
height: 50px;
content: '';
transform: rotate(45deg);
border-bottom: 2px solid #05c;
background: #fff;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment