A Pen by metamn.

index.html

<div class="smartphone"></div>

One-element-CSS-smartphone-icon.markdown

One-element CSS smartphone icon

Original idea by Kasper Nordkvist (http://kaspernordkvist.dk/lab/dtp/).

A Pen by metamn on CodePen.

License.

script.js

/* 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/ */

style.css

.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%;
}