A Pen by One div.

index.html

<div class="wrapper">
<div class="watch">
  <div class="strap strap-top">
      <div class="mesh"></div>
      <div class="mesh"></div>
      <div class="mesh"></div>
      <div class="mesh"></div>
      <div class="mesh"></div>
  </div>
  <div class="case">
    <div class="crown"></div>
    <div class="power"></div>
  </div>
  <div class="strap strap-bottom">
      <div class="mesh"></div>
      <div class="mesh"></div>
      <div class="mesh"></div>
      <div class="mesh"></div>
      <div class="mesh"></div>
  </div>
</div>
  </div>

  <div class="resizer">
      <h1>Change the size</h1>
          <input type="range" name="range" id="range" min="7" max="21" step="2" value="11"/>
  </div>

Pure-CSS-Apple-Watch.markdown

Pure CSS Apple Watch

Pure CSS Apple Watch fully resizable thanks to em unit.

Follow me on Twitter : @One_div or on Dribbble : dribbble.com/One_div

A Pen by One div on CodePen.

License.

script.js

/*
Follow me on Twitter : @One_div
or on Dribbble : dribbble.com/One_div
*/

$('#range').on("change", function() {
    $('.wrapper').css('font-size',this.value +"px");
    }).trigger("change");

style.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
.wrapper{
  font-size:11px;
  margin:2em auto;
  width:30em;
}
.watch{
  position:relative;
  margin:0 auto;
  width:22.8em;
  padding:7.3em 0
}
.case{
  position:relative;
  z-index:2;
  background:#030303;
  width:21.2em;
  height:24.7em;
  border-radius:4em;
  box-shadow: inset 0 0 0 0.1em #bdbdbd, inset 0 0 0.2em 0.2em #bebebe, inset 0 0.3em 0.3em 0.4em #070707, inset 0 -0.3em 0.1em 0.1em #070707, inset 0 0 0 0.9em #fff,inset 0 0 0 1.05em #313131, inset 3.5em -0.5em 2em -2em #a4a4a4, inset -1.2em -0em 0.5em 0em #a4a4a4, inset -0.4em -1.1em 0.5em 0em #a4a4a4;
}
.case:before{
  content:'';
  position:absolute;
  top:0.3em;
  left:2.5em;
  right:2.5em;
  height:8%;
  background:linear-gradient(to bottom, rgba(255,255,255,0.5) 1%,rgba(255,255,255,0.5) 41%,rgba(255,255,255,0.2) 100%);
  border-radius:10em 10em 11em 11em / 4em 4em 4em 4em;
}
.crown{
position: absolute;
background: #f6f6f6;
width: 1.5em;
height: 4.2em;
top: 5.3em;
right: -0.9em;
box-shadow: -0.26em 0 0 -0.1em #060606,inset -0.1em 0 0.1em 0 #747474,inset 0 -0.1em 0 #fefefe,inset 0 0.1em 0 #fefefe,inset 0em 0.2em 0.1em 0em #eeeeee,inset 0.1em 1.1em 0.6em -0.3em #040404,inset 0.1em -1.1em 0.6em -0.3em #040404;
border-radius: 0.8em 0.6em 0.6em 0.8em / 1em 0.6em 0.6em 1em;
  overflow:hidden;
}
.crown:before {
content: '';
position: absolute;
top: 0.1em;
right: 0;
height: 0.1em;
width: 0.5em;
background: rgba(0,0,0,0.2);  
box-shadow: 
 0 0.1em 0 rgba(255, 255, 255, 0.2), 
0 0.3em 0 rgba(0, 0, 0, 0.2), 
0 0.4em 0 rgba(255, 255, 255, 0.2), 
0 0.6em 0 rgba(0, 0, 0, 0.2), 
0 0.7em 0 rgba(255, 255, 255, 0.2), 
0 0.9em 0 rgba(0, 0, 0, 0.2), 
0 1em 0 rgba(255, 255, 255, 0.2), 
0 1.2em 0 rgba(0, 0, 0, 0.2), 
0 1.3em 0 rgba(255, 255, 255, 0.2), 
0 1.5em 0 rgba(0, 0, 0, 0.2), 
0 1.6em 0 rgba(255, 255, 255, 0.2), 
0 1.8em 0 rgba(0, 0, 0, 0.2), 
0 1.9em 0 rgba(255, 255, 255, 0.2), 
0 2.1em 0 rgba(0, 0, 0, 0.2), 
0 2.2em 0 rgba(255, 255, 255, 0.2), 
0 2.4em 0 rgba(0, 0, 0, 0.2), 
0 2.5em 0 rgba(255, 255, 255, 0.2), 
0 2.7em 0 rgba(0, 0, 0, 0.2), 
0 2.8em 0 rgba(255, 255, 255, 0.2), 
0 3em 0 rgba(0, 0, 0, 0.2), 
0 3.1em 0 rgba(255, 255, 255, 0.2), 
0 3.3em 0 rgba(0, 0, 0, 0.2), 
0 3.4em 0 rgba(255, 255, 255, 0.2), 
0 3.6em 0 rgba(0, 0, 0, 0.2), 
0 3.7em 0 rgba(255, 255, 255, 0.2), 
0 3.9em 0 rgba(0, 0, 0, 0.2), 
0 4em 0 rgba(255, 255, 255, 0.2), 
0 4.2em 0 rgba(0, 0, 0, 0.2), 
0 4.3em 0 rgba(255, 255, 255, 0.2), 
0 4.5em 0 rgba(0, 0, 0, 0.2), 
0 4.6em 0 rgba(255, 255, 255, 0.2), 
0 4.8em 0 rgba(0, 0, 0, 0.2), 
0 4.9em 0 rgba(255, 255, 255, 0.2), 
0 5.1em 0 rgba(0, 0, 0, 0.2), 
0 5.2em 0 rgba(255, 255, 255, 0.2)  
}
.power{
  position:absolute;
  right:-0.3em;
  top:13em;
  height:6.5em;
  width:0.5em;
  background:#e4e4e4;
border-radius: 0.3em 0.1em 0.1em 0.3em / 0.9em 0.1em 0.1em 0.9em;
  box-shadow: inset 0.1em 0.05em 0 #AFAFAF,inset -0.2em 0.5em 0.2em -0.2em #FFF,inset -0.25em 0.8em 0.2em -0.2em #000,inset 0.1em -0.6em 0.2em -0.2em #000;
}
.strap{
  position:absolute;
  z-index:1;
  left:2.5em;
  width:16.2em;
  height:7.6em;
}
.strap.strap-top{
  top:0;
}
.strap.strap-bottom{
  bottom:0;
transform: rotate(180deg);
}
.strap:before {
content: '';
position: absolute;
left: -3.2em;
bottom: -0.3em;
height: 3.7em;
width: 3.7em;
border-radius: 50%;
box-shadow: 2.2em 2.2em 0 -0.5em #B8B8B8;
}
.strap:after {
content: '';
position: absolute;
right: -3.2em;
bottom: -0.3em;
height: 3.7em;
width: 3.7em;
border-radius: 50%;
box-shadow: -2.2em 2.2em 0 -0.5em #A0A0A0;
}
.mesh{
  position:absolute;
  box-shadow: inset 0 0.1em 0 #FFF, 0 -0.7em 0 -0.6em rgba(0, 0, 0, 0.6), 0 -0.75em 0 -0.6em rgba(255, 255, 255, 0.5);
}
.mesh:nth-child(1){
  z-index:5;
  bottom:-0.5em;
  left:0;
  width:100%;
  height:2.5em;
  background:linear-gradient(to top, #a1a1a1 1%,#eeeeee 100%);
  border-radius: 2em 2em 0 0 / 2.5em 2.5em 0 0;
  overflow:hidden;
}
.mesh:nth-child(1):before{
  content:'';
  position:absolute;
  bottom:-1em;
  width:100%;
  height:5em;
  left:0;
  box-shadow: inset 0 -2.6em 1em -0.5em rgba(0, 0, 0, 0.3);
  transform: rotate(-4deg);
}
.mesh:nth-child(2){
  z-index:4;
  bottom:1.5em;
  width:90%;
  left:5%;
  height:2.5em;
  background:linear-gradient(to bottom, #d2d2d2 1%,#e9e9e9 100%);
  border-radius: 1.5em 1.5em 0 0 / 2.5em 2.5em 0 0;
  box-shadow: inset 0 0.1em 0 #FFF, 0 -0.4em 0 -0.3em rgba(0, 0, 0, 0.6), 0 -0.75em 0 -0.6em rgba(255, 255, 255, 0.5);
}
.mesh:nth-child(3){
  z-index:3;
  bottom:3.5em;
  width:82%;
  left:9%;
  height:2.3em;
  background:linear-gradient(to bottom, #d7d7d7 1%,#ececec 100%);
  border-radius: 1.1em 1.1em 0 0 / 2.2em 2.2em 0 0;
  box-shadow: inset 0 0.1em 0 #FFF, 0 -0.25em 0 -0.15em rgba(0, 0, 0, 0.6), 0 -0.75em 0 -0.6em rgba(255, 255, 255, 0.5);
}
.mesh:nth-child(4){
  z-index:2;
bottom: 5.1em;
width: 78%;
left: 11%;
  height:2em;
  background:linear-gradient(to bottom, #d5d5d5 1%,#ebebeb 100%);
  border-radius: 1em 1em 0 0 / 1.9em 1.9em 0 0;
  box-shadow: inset 0 0.1em 0 #FFF, 0 -0.25em 0 -0.15em rgba(0, 0, 0, 0.6), 0 -0.75em 0 -0.6em rgba(255, 255, 255, 0.5);
}
.mesh:nth-child(5) {
z-index: 1;
bottom: 6.75em;
width: 74%;
left: 13%;
height: 1.2em;
background: linear-gradient(to bottom, #c3c3c3 1%,#e2e2e2 100%);
border-radius: 0.7em 0.7em 0 0 / 1.2em 1.2em 0 0;
box-shadow: inset 0 0.1em 0 #FFF, 0 -0.75em 0 -0.6em rgba(255, 255, 255, 0.5);
}

.resizer{
  position:absolute;
  top:1em;
  left:1em;
  width:230px;
}

h1{
  font-family: 'Open Sans', sans-serif;
  text-align:center;
  font-size:2em;
}
#range{
  margin-top:2em;
  width:100%;
}