利用纯CSS绘制iPhone X

 

<div class="device iphone-x">
        <!--    外部轮廓    -->
        <div class="frame">
            <div class="content">
                <div class="time">10:19</div>
            </div>
        </div>

        <!--    天线    -->
        <div class="stripe"></div>

        <!--    听筒孔    -->
        <div class="header">
            <div class="sensors"></div>
        </div>

        <!--    按键    -->
        <div class="btns"></div>
        <div class="power"></div>
    </div>

*{
  margin: 0;
  padding: 0;
}

.device *,
.device *::before,
.device *::after {
  box-sizing: border-box;
  display: block;
}

.device {
  margin: 50px auto;
  position: relative;
}

.device .frame {
  z-index: 1;
}

.iphone-x {
  height: 694px;
  width: 342px;
}

.iphone-x .frame {
  background: #222;
  border-radius: 54px;
  box-shadow: inset 0 0 0 2px #606467, inset 0 0 0 6px #e2e3e4;
  height: 694px;
  padding: 22px;
  width: 342px;
}

.iphone-x .content {
  background-color: #fff;
  background-image: url("bg.jpg");
  background-position: center center;
  background-size: cover;
  border-radius: 32px;
  height: 650px;
  position: relative;
  width: 300px;
}

.iphone-x .stripe::after,
.iphone-x .stripe::before {
  border: solid rgba(51, 51, 51, .25);
  border-width: 0 6px;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 9;
}

.iphone-x .stripe::after {
  top: 68px;
}

.iphone-x .stripe::before {
  bottom: 68px;
}
.iphone-x .header {
  background: #222;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  height: 24px;
  left: 50%;
  margin-left: -82px;
  position: absolute;
  top: 22px;
  width: 164px;
  z-index: 199;
}

.iphone-x .header::after,
.iphone-x .header::before {
  content: "";
  height: 6px;
  position: absolute;
  top: 0;
  width: 6px;
}

.iphone-x .header::after {
  background: radial-gradient(circle at bottom left, transparent 0, transparent 75%, #222 75%, #222 100%);
  left: -6px;
}

.iphone-x .header::before {
  background: radial-gradient(circle at bottom right, transparent 0, transparent 75%, #222 75%, #222 100%);
  right: -6px;
}

.iphone-x .sensors::after,
.iphone-x .sensors::before {
  content: "";
  position: absolute;
}

.iphone-x .sensors::after {
  background: #444;
  border-radius: 2.5px;
  height: 5px;
  left: 50%;
  margin-left: -20px;
  top: 4px;
  width: 40px;
}

.iphone-x .sensors::before {
  background: #444;
  border-radius: 50%;
  height: 11px;
  left: 50%;
  margin-left: 30px;
  top: 1px;
  width: 11px;
}
.iphone-x .btns {
  background: #606467;
  height: 26px;
  left: -2px;
  position: absolute;
  top: 92px;
  width: 3px;
}

.iphone-x .btns::after,
.iphone-x .btns::before {
  background: #606467;
  content: "";
  height: 50px;
  left: 0;
  position: absolute;
  width: 3px;
}

.iphone-x .btns::after {
  top: 48px;
}

.iphone-x .btns::before {
  top: 112px;
}

.iphone-x .power {
  background: #606467;
  height: 80px;
  position: absolute;
  right: -2px;
  top: 160px;
  width: 3px;
}