Как вставить изображение?

Question

[Дмитрий Смирнов]

Друзья, подскажите, пожалуйста, как вставить картинку айфона таким образом
joxi.ru/52azaoRS4ebkEA

Картинка целая (то есть тут видно только пол айфона).
Проблема в том, что я могу её вставить так, используя background:url(), но тогда картинка получается не адаптивной.
Поэтому решил делать через тег img, картинка получается адаптивной, но у меня не получается спрятать пол айфона.

Answer 1

[Сергей Жубартович]

<div class="box">
  <img src="iphone.png" alt="">
</div>
<div class="next-box"></div>

.box {
  overflow: hidden;
}

.box img {
  position: absolute;
  top: 100%; 
  left: 50%;
  transform: translate(-50%, -50%);
}
.next-box {
  position: relative;
}

.next-box:before {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  background: #28c8c6 url(down-icon.png) no-repeat  20px 10px;
  border-radius: 100%; 
  position: absolute
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
}

Что-то примерно такое

Comments

[Дмитрий Смирнов]

Спасибо! overflow:hidden помог