Place an element above the top border, but below the bottom border

Question

Place an element above the top border, but below the bottom border

I'm facing a challenge with my div-container, which contains a bootstrap collapse element. Inside it, there is a circular element that changes its position when the collapse function is used. The goal is to have this element positioned at the top border but hidden behind the bottom border.

https://i.sstatic.net/7wriK.png

How would you approach solving this issue?

My initial thought was to use object-fit to trim the bottom part of the circular element, but this didn't align well with the transition and collapse effects. Another idea was to add a thick border-bottom as an after-pseudo-element to cover the bottom part, but I haven't had success with that yet.

Do you have any suggestions or experience in tackling a similar problem?

Thank you!

html css

Answer 1

Answer №1

Utilize clip-path with CSS:

.box {
  border: 3px solid;
  height: 200px;
  margin: 50px;
  position: relative;
  clip-path: inset(-200% 0 0); /* Apply a large negative value on the top to only clip 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>

Answer 2

Utilize clip-path with CSS:

.box {
  border: 3px solid;
  height: 200px;
  margin: 50px;
  position: relative;
  clip-path: inset(-200% 0 0); /* Apply a large negative value on the top to only clip 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>

Answer 3

Answer №2

You can also utilize transform3D along with the background property to conceal certain parts 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>Content placed here</div>
<div class>
  <p>Hover over to collapse</p>
  <span></span>
</div>
<div>Additional content here</div>

Answer 4

You can also utilize transform3D along with the background property to conceal certain parts 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>Content placed here</div>
<div class>
  <p>Hover over to collapse</p>
  <span></span>
</div>
<div>Additional content here</div>

Place an element above the top border, but below the bottom border

Answer №1

Answer №2

Similar questions

Breaking up phrases into separate lines (Bootstrap 4 + Mobile)

The width of the flexbox child item is too narrow for the content it contains

Ways to assign a default background shade to a webpage with a transparent background

Effective ways to enable users to upload files in a React Native app

Wrapping is disabled for all elements within the container div that contains three additional div elements

TinyMCE editor does not appreciate being shifted from place to place

Creating Structured Lists with HTML Columns

How can I move Bootstrap 5 navbar list items to the right side?

Issue with resizing background image in CSS

The anchor tag's href attribute isn't working properly when using a single slash, but it works

Issues with CSS filters affecting the layout of webpage elements

Image uploading in Angular is not compatible with Internet Explorer, however, it functions correctly in Google Chrome

Implementing dynamic CSS in AngularJS using conditional statements

Disabling buttons in a Fiori UI5 application using HTML: A step-by-step guide

Creating an external JavaScript and CSS file for date picker in Eclipse can be done by following a few simple steps. By creating separate files for the

Google Maps in Angular is not showing up

Utilize the dimensions of one image to resize others using the JavaScript method .getBoundingClientRect

Ways to Retrieve HTML Snippet from Handler Request and Load it into a String

Struggling to update the inner HTML of a <p> tag using LocaleDateString() function

When linking to a section, the Bootstrap navbar obscures the top part of