как спрятать все елементы в блоке div

Question

как спрятать все елементы в блоке div

Рейтинг: 2Ответов: 1Опубликовано: 27.04.2023

уже есть такая часть кода:

.n5{
            height: calc(450px + 100px * 2);
            background: linear-gradient(45deg, rgba(255,0,0,1) 0%, rgba(255,255,0,1) 50%, rgba(255,0,0,1) 100%);
            position: relative;
        }
        .obolochka{
            height: 450px;
            width: 450px;
            position: absolute;
            top:100px;
            left: calc(50% - 450px / 2);
            border: 2px black solid;
            overflow:hidden;
        }
        .k1{
            height: 300px;
            width: 300px;
            position: absolute;
            top: 150px;
            left:150PX;
            border: 2px black solid;
            border-radius: 50%;
            }   
        .k2{
            height: 300px;
            width: 300px;
            position: absolute;
            bottom:150px;
            right:150px;
            border: 2px black solid;
            border-radius: 50%;
        }
        .s1{
            height: 300px;
            width: 300px;
            position: absolute;
            top:-150px;
            left:-150px;
            background: red;
            border: 1px black solid;
            border-radius: 50%;
        }   
        .s2{
            height: 300px;
            width: 300px;
            position: absolute;
            bottom:-150px;
            right:-150px;
            background :red;
            border: 2px black solid;
            border-radius: 50%;
        }

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
  </head>
<body>
<section class="n5">
        <div class="obolochka">
            <div class="s1"><div class="k1"></div></div>
            <div class="s2"><div class="k2"></div></div>
        </div>
    </section>
</body>
</html>

css html

Источник: Stack Overflow на русском

Answer 1

▲ 3Принят

Для того, чтобы повторить фигуры на представленном изображении, воспользуйтесь радиальным градиентом вместо сплошного фона:

.n5 {
  position: relative;
  height: calc(450px + 100px * 2);
  background: linear-gradient(45deg, #f00 0%, #ff0 50%, #f00 100%);
}

.obolochka {
  position: absolute;
  top: 100px; left: calc(50% - 450px / 2);
  height: 450px; width: 450px;
  overflow: hidden;
  box-shadow: 0 0 0 2px black;
}

.k1, .k2, .s1, .s2 {
  position: absolute;
  height: 300px; width: 300px;
  border-radius: 50%;
}
.k1 {
  top: 150px; left: 150px;
  box-shadow: inset 0 0 0 2px black;
}
.k2 {
  bottom: 150px; right: 150px;
  box-shadow: inset 0 0 0 2px black;
}
.s1 {
  top: -150px; left: -150px;
  background-image: radial-gradient(circle at right bottom, transparent 0 149px, red 150px);
}
.s2 {
  bottom: -150px; right: -150px;
  background-image: radial-gradient(circle at left top, transparent 0 149px, red 150px);
}

<section class="n5">
  <div class="obolochka">
    <div class="s1">
      <div class="k1"></div>
    </div>
    <div class="s2">
      <div class="k2"></div>
    </div>
  </div>
</section>

Кроме того, для границ и обводок используйте box-shadow, а не border - зачастую, очень помогает избежать ненужных сдвигов и вычислений с поправкой на толщину рамки.

как спрятать все елементы в блоке div

Ответы