как склеить два элемента?

Question

как склеить два элемента, помеченные зеленой галочкой(синий и красный)? при том, что сам белый блок под ними имеет абсолютное позиционирование. Знаю, что можно задать для каждого top, right и так далее, но тогда это не будет адаптивным.

Answer 1

div {
  width: fit-content;
  background: blue;
  color: white;
}

section {
  width: fit-content;
  margin: auto;
  position: relative;
}

i {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
  background: red;
  border-radius: 50%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
}

<section>
  <div>Blue<br>Blue blue blue<br>Blue</div>
  <i>RED</i>
</section>

Answer 2

div {
  width: fit-content;
  margin: auto;
  position: relative;
  background: blue;
  color: white;
}

div::after {
  content: "";
  position: absolute;
  right: -1em;
  bottom: -1em;
  width: 2em;
  height: 2em;
  background: red;
  border-radius: 50%;
}

<div>Blue<br>Blue blue blue<br>Blue</div>

БЛОГ НА HUSL

как склеить два элемента?

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