タイトルの通りなのですが、びっくりするくらい時間を持て余していたのでCSSでiPhoneを描いてみました。
最後にサンプルコードを載せます。

実装方法

HTMLは以下です。

<div class="iphone">
    <div class="iphone-top">
        <div class="button on-off"></div>
            <span class="camera"></span>
            <div class="buttons">
                <span class="sensor"></span>
                <span class="speaker"></span>
            </div>
        </div>
        <div class="top-bar"></div>
        <div class="iphone-screen">
            <div class="bg-img"></div>
        </div>
        <div class="buttons">
            <span class="button sleep"></span>
            <span class="button up"></span>
            <span class="button down"></span>
        </div>
        <div class="bottom-bar"></div>
        <div class="iphone-bottom">
            <div class="buttons">
                <span></span>
            </div>
        </div>
    </div>
</div>

おおまかに5つのパーツで構成しています。

① 外枠（.iphone）
各パーツのwrapperで全体の大きさや位置を定義してます。

② 本体上部（.iphone-top）
カメラ、センサー、スピーカーがある部分です。

CSSは以下のような形で、それぞれborder-radiusで丸や楕円にしてbackground-colorで色をつけています。

.camera {
    border-radius: 50%;
    background: #333;
    height: .5rem;
    width: .5rem;
}
.speaker {
    border-radius: 6px;
    background: #292728;
    height: .35rem;
    width: 4.5rem;
}

③ スクリーン（.iphone-screen）
background-imageで画像を貼り付けています。

④ ホームボタン（.bottom-bar）

<span></span>に丸を書き、liner-gradientで金属っぽい色にした上に :before属性で白丸を重ねています。

.iphone-bottom span {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
}
.iphone-bottom span:before {
    content: ""; 
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    margin-top: .25rem;
    margin-left: .25rem;
}

⑤ 側面の装飾・ボタン（.top-bar、.bottom-bar、.button）
iPhoneの側面にある線（.top-bar、.bottom-bar）と各種ボタン（.button）をくっつけてあります。

boder-radiusで形を整えてbackground-colorをつけています。
.buttonの方は位置調整にちょっと無理やり感もありますがposition: absolute; で指定しています。

.top-bar, .bottom-bar {
    border-left: 5px solid #BBB;
    border-right: 5px solid #BBB;
    height: .8rem;
    margin-left: -.3rem;
    margin-right: -.35rem;
}
.button {
    background: #CCC;
    border-radius: 2px 0px 0px 2px;
}
.button.up,
.button.down,
.button.sleep {
    position: absolute;
    width: .3rem;
    margin-left: -.5rem;
}
.button.sleep {
    top: 7rem;
    height: 3rem;
    border-radius: 0px 2px 2px 0px;
}
.button.up {
    height: 2rem;
    top: 11rem;
}
.button.down {
    height: 2rem;
    top: 13.5rem;
}

サンプルコード

サンプルコードを以下に載せます。
HTML1枚に書いているので、コピぺして.htmlファイルを開いて貰うと画像と同じような画面が開けるかと思います。