以前、CSSでiPhone5をつくったことがありましたが、
流石に古くなってきたので、iPhone7につくりかえてみました。
以前のコードと比べると、要素数が少なくなっていて成長を感じますね。
(before、after、box-shadowをつかうようになりました)
左右のボタンを1つの要素にしてbox-shadowで増やそうかとも思ったのですが、微妙に角丸にしたかったのでサイレントスイッチを削りました。
ものすごく頑張れば再現できた気もしますが、シンプルさを重視した結果です。
HTML
<div id="body"> <div class="camera"></div> <div class="speaker"></div> <div class="screen"></div> <div class="home"></div> </div>
SCSS
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; -webkit-user-select: none; -webkit-backface-visibility: hidden; } body { background: #aaa; } #body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border: solid 3px #6a6a6a; border-radius: 56px; width: 419px; height: 861px; background: #080808; transform: scale(.6); .camera { position: absolute; top: 44px; left: 155px; margin: 0 0 0 -7px; border: solid 3px #6a6a6a; border-radius: 50%; width: 6px; height: 6px; background: #1a1a1a; } .speaker { position: absolute; top: 44px; left: 50%; margin: 0 0 0 -34px; border: solid 3px #6a6a6a; border-radius: 10px; width: 60px; height: 5px; background: #1a1a1a; } .screen { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 375px; height: 667px; background: rgba(255, 255, 255, .1); } .home { position: absolute; bottom: 18px; left: 0; right: 0; margin: auto; border: solid 3px #6a6a6a; border-radius: 50%; width: 60px; height: 60px; background: #080808; } &:before { display: block; position: absolute; top: 180px; left: -6px; border-radius: 5px 0 0 5px; width: 6px; height: 50px; content: ""; background: #2b2b2b; box-shadow: 0 70px 0 #2b2b2b; } &:after { display: block; margin: 180px 0 0 419px; border-radius: 0 5px 5px 0; width: 6px; height: 50px; content: ""; background: #2b2b2b; } }