CODEWITHSUNDEEP
htmlcss
cd-media
cd-media

Reputation: 93

Position an element on top-border, but behind bottom-border

I have a div-container, a bootstrap collapse element. In it there is another round element, which changes position, when using the collapse function. Means: It should be positioned on the top-border, but behind the bottom-border.

enter image description here

How would you solve this task?

My first idea was to use object-fit to cut off the bottom part of the round element, but that did not look well with transition and collapse. Second idea was to use a thick border-bottom as an after-pseudo-element to cover the bottom part, which did not work so far.

Do you have any ideas or have you done something like that?

Thank you!

Upvotes: 1

Views: 545

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106008

You may also use transform3D + background to hide portions of it:

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>hover to collapse</p>
  <span></span>
</div>
<div>Whatever stands next</div>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 273483

Use 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>

Upvotes: 3

Related Questions