Как сделать блок формы корпуса датчиков и камеры iPhone X?

Question

Как скрыть верхнюю границу частично? Возможно ли это сделать псевдоклассами? Как сделать, чтобы background был видим?

Answer 1

Вот примерный результат:

.i {
    position: relative;
    height: 500px;
    width: 300px;
    border-radius: 25px;
    border: 3px solid green;
}

.i div {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    width: 50%;
    height: 50px;
    border: 3px solid red;
    border-radius: 25px;
}

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>

<body>
    <div class="i">
        <div></div>
    </div>
</body>

</html>

Answer 2

Накостылил тут такой вариант:

body {
  background: linear-gradient(-135deg, #ebf3fb, violet);
  min-height: 100vh;
}

.block {
  max-width: 200px;
  /* Переменные */
  --border-width: 4px;
  --border-color: #a8ca3f;
  --background: #fff;
  --border-radius: 10px;
  --ears-width: 40px;
  --ears-height: 30px
}

.block .top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}

.block .top::before,
.block .top::after {
  content: '';
  display: flex;
  border: var(--border-width) solid var(--border-color);
  border-bottom: 0;
  min-width: calc(var(--ears-width) - var(--border-width));
  height: var(--ears-height);
  background: var(--background);
  position: relative;
  z-index: 1;
}

.block .top::before {
  border-right: 0;
  border-radius: var(--border-radius) 0 0 0;
}

.block .top::after {
  border-left: 0;
  border-radius: 0 var(--border-radius) 0 0;
}

.block .top .center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: var(--ears-height);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  border: var(--border-width) solid var(--border-color);
  border-top: 0;
  margin: calc(var(--border-width) * -1);
  margin-top: 0;
  padding-bottom: var(--border-width);
  position: relative;
  z-index: 2;
}

.block .content {
  display: block;
  width: 100%;
  height: 150px;
  background: #fff;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  border: var(--border-width) solid var(--border-color);
  border-top: 0;
  padding-top: var(--border-width);
  box-sizing: border-box;
}

<div class="block">
  <div class="top">
    <div class="center">Бесплатно</div>
  </div>
  <div class="content"></div>
</div>

Как можете заметить, блок между "ушек" прозрачен.

БЛОГ НА HUSL

Как сделать блок формы корпуса датчиков и камеры iPhone X?

Ответы (2 шт):