как "вырезать" контейнер из контейнера

Question

Подскажите, пожалуйста, сейчас square3 имеет явно указанный цвет: red. Как можно сделать так, чтобы он был красным, но за счет цвета square1, то есть был прозрачный и "вырезан" из square2. Чтобы можно было, например, в square1 поставить какое-то изображение, и оно было бы видно в square3.

HTML

#square1 {
  width: 400px;
  height: 400px;
  background-color: red;
  position: relative;
}

#square2 {
  width: 200px;
  height: 200px;
  background-color: blue;
}

#square3 {
  width: 100px;
  height: 100px;
  background-color: red;
}

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

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

<body>

  <div id="square1">
    <div id="square2">
      <div id="square3">

      </div>
    </div>
  </div>

</body>

</html>

Answer 1

сейчас square3 имеет явно указанный цвет: red. Как можно сделать так, чтобы он был красным, но за счет цвета square1, то есть был прозрачный и "вырезан" из square2

Как вариант - воспользоваться псевдо элементами square2. Т.о. получится некий эффект "вырезания" из square2 нужного прямоугольника.

:root {
  --len: 100px;
}
#square1 {
  width: 400px;
  height: 400px;
  background-color: red;
  position: relative;
}

#square2 {
  width: 200px;
  height: 200px;
  position: relative;
  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--len);
    background-color: blue;
  }
  &::before {
    content: '';
    position: absolute;
    background-color: blue;
    top: var(--len);
    left: 0;
    bottom: 0;
    width: var(--len);
  }
}

#square3 {
  width: var(--len);
  height: var(--len);
  /*background-color: red;*/
}

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

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

<body>

  <div id="square1">
    <div id="square2">
      <div id="square3">

      </div>
    </div>
  </div>

</body>

</html>

Answer 2

Помимо псевдоэлементов еще можно второй квадрат сделать полностью прозрачным, а внутрь уже добавить нужное количество элементов с нужным цветом.

#square1 {
    width: 400px;
    height: 400px;
    background-color: red;
    background-image: url(https://i.pinimg.com/originals/08/2a/7c/082a7c71ba8e16ea997d5fcf8530abc0.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

#square2 {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;

    width: 200px;
    height: 200px;
}

.square-part {
    display: block;
    background-color: blue;
}

.square-part.no-color {
    background-color: transparent;
}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div id="square1">
        <div id="square2">
            <span class="square-part no-color"></span>
            <span class="square-part"></span>
            <span class="square-part"></span>
            <span class="square-part"></span>
        </div>
    </div>

</body>

</html>

Answer 3

square3 в данном случае вообще не нужен.

для square2 укажите прозрачный фон и задайте жирный border

:root {
  --len: 6.25rem
}

div {
  width: calc(var(--len) * 4);
  height: calc(var(--len) * 4);
  background: red;
  overflow: hidden
}

div>div {
  box-sizing: content-box;
  width: var(--len);
  height: var(--len);
  background: transparent;
  border: var(--len) solid blue;
  margin: calc(-1 * var(--len)) 0 0 calc(-1 * var(--len))
}

<div>
  <div></div>
</div>

Answer 4

Странно, что никто не предложил вариант на clip-path.
Как мне кажется, он тут лучше всего подойдёт.

#square1 {
  width: 400px;
  height: 400px;
  background-image: url('https://i.imgur.com/WpIujfb.png');
  background-size: cover;
  position: relative;
}

#square2 {
  width: 200px;
  height: 200px;
  background-image: url('https://i.imgur.com/agFpVht.png');
  background-size: cover;
  clip-path: polygon(
    100px 0,
    100% 0,
    100% 100%,
    0 100%,
    0 100px,
    100px 100px
  );
}

<div id="square1">
  <div id="square2"></div>
</div>

БЛОГ НА HUSL

как "вырезать" контейнер из контейнера

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