Skip to content

Instantly share code, notes, and snippets.

@metamn
Created February 9, 2014 08:39
Show Gist options
  • Save metamn/8896256 to your computer and use it in GitHub Desktop.
Save metamn/8896256 to your computer and use it in GitHub Desktop.
A Pen by metamn.
<div class="smartphone"></div>
/* Original code by Kasper Nordkvist : http://kaspernordkvist.dk/lab/dtp/ */
/* My goal was to try to make a smartphone icon with a single element : success \o/ */
.smartphone {
background: #fff;
width: 69px;
margin: 30px auto;
height: 90px;
border-top:25px solid black;
border-bottom:25px solid black;
border-left:4px solid black;
border-right:4px solid black;
border-radius:10px;
position:relative;
}
.smartphone:before {
content:"";
display:block;
position:absolute;
top:-13px;
left:50%;
margin-left:-10px;
background: inherit;
height: 3px;
width: 20px;
border-radius: 4px;
}
.smartphone:after {
content:"";
display:block;
position:absolute;
bottom:-18px;
left:50%;
margin-left:-6px;
background: inherit;
width: 12px;
height: 12px;
border-radius: 50%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment