Как поместить элемент на `top-border`, но позади bottom-border?

Question

У меня есть div-контейнер, элемент коллапса bootstrap. В нем есть еще один круглый элемент, который меняет положение при использовании функции коллапса. Значит: он должен быть расположен на верхней границе, но позади нижней границы.

Как бы вы решили эту задачу?

Моя первая идея заключалась в том, чтобы обрезать нижнюю часть круглого элемента по объекту, но это не очень хорошо выглядело с переходом и сворачиванием. Вторая идея заключалась в том, чтобы использовать толстую границу снизу в качестве псевдоэлемента после, чтобы закрыть нижнюю часть, что пока не сработало.

У вас есть идеи как это сделать?

_{Свободный перевод вопроса Position an element on top-border, but behind bottom-border от участника @cd-media.}

Answer 1

Вы также можете использовать transform3D + background, чтобы скрыть его части:

div {
  margin:0 1em;
  padding:1px;
  display:flex;
  padding-bottom:2em;
  background:white;
  transform-style: preserve-3d;
}
div[class] {
  border:solid;
  border-bottom:none;
  height:150px;
  transition:0.25s;
}
div[class] + div {
  border-top:solid;
  }
div[class]:hover {
  height:60px;
}
div span { 
  height:150px;
  width:150px;
  align-self:center;
  background:red;
  border-radius:50%;
  margin-right:1em;
  border:solid;
  margin-left:auto;
  margin-bottom:-2.2em;
  transform:rotatex(-0.15deg) translatez(1px);;
}

<div>Whatever stands here</div>
<div class>
  <p>Наведите, чтобы свернуть</p>
  <span></span>
</div>
<div>Что будет дальше</div>

_{Свободный перевод ответа от участника @G-Cyrillus.}

Answer 2

Используйте clip-path

.box {
  border: 3px solid;
  height: 200px;
  margin: 50px;
  position: relative;
  clip-path: inset(-200% 0 0); /* a big negative value on the top to clip only left/right/bottom */
  transition: 1s;
}

.box:hover {
  height: 50px;
}

.box:before {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 100px;
  height: 100px;
  border: 3px solid;
  border-radius: 50%;
  background: red;
}

<div class="box">

</div>

_{Свободный перевод ответа от участника @Temani Afif.}

БЛОГ НА HUSL

Как поместить элемент на `top-border`, но позади bottom-border?

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