Is it possible to position a border outside of the parent element's constraints?

Struggling with a design challenge that requires me to create a UI like the one shown in the following image.

This is how the closed accordion state looks: https://i.sstatic.net/THVgr.png

And here is the open accordion state. Notice the red circled area where the border height remains consistent. https://i.sstatic.net/doUnm.png

Below is a pseudo code snippet of how I achieved the above UI design:

<div class="card-wrapper" style="display:flex; flex-direction:column; border:1px solid #000; border-radius: 5px;">
    <div class="card-body" style="border-left: 10px solid #F00; border-top-left-radius: 10px; border-bottom-left-radius: 10px;">
        ...
    </div>
    <div class="card-accordion-body">
        ...
    </div>
</div>

Take a look at my final output: https://i.sstatic.net/oStw3.png

htmlcssbootstrap-4

Answer №1

Implementing a pseudo-element with absolute positioning

div {
  max-width: 450px;
  height: 75px;
  outline: 1px solid grey;
  margin: 2em auto;
  padding: 1em;
  border-radius: 0 1em 1em;
  position: relative;
  transition: height .3s ease;
}

div:before {
  content: "";
  height: 50px;
  position: absolute;
  width: .5em;
  background: red;
  left: 0;
  top: 0;
  border-radius: 1em 0 0 1em;
  transform: translateX(-100%);
}

div:hover {
  height: 100px;
}
<div>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit vitae, eligendi aperiam aut id illo neque nemo. Est, magnam assumenda.</p>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

SQL Server database is showing question marks instead of HTML symbols

Recently, I observed that special HTML symbols like: ★ are appearing as question marks in my database records. I have set the type of the field as varchar and am utilizing Microsoft SQL 2008 for my database management. Is there a solution to this symbo ...

htmlsql-serversymbols

Ways to display a Tooltip automatically without needing to hover using only CSS

I have a tooltip that is set to appear when we hover over the div element, Is there a way to display the tooltip automatically when the page is refreshed without using Javascript? I am looking for a solution in pure CSS only. I attempted to remove displa ...

javascripthtmlcsstooltip

Encircle a particular row in a table with a border

I'm having trouble creating a border around only the top row of my table. Right now, the border is only displayed around the outside of the entire table. I also want to add a border specifically to the first row that contains 'Team, Correct Picks ...

phphtmlcsshtml-tableborder

Is there a way for me to retrieve the price using the xpath?

I have this code snippet currently: CurrentPrice=driver.find_element_by_xpath('/html/body/div[2]/div[4]/div[2]/header/div/div[3]/div[1]/div/div/div/div[1]/div[1]').get_attribute("title") This is the price data I am attempting to extrac ...

pythonhtmlweb-scraping

Animating an element from its center with pure CSS

I've dedicated countless hours to uncovering a solution that can be achieved using only CSS. My goal is to create an animation on a div element where its height and width decrease uniformly when hovered over. <div class="a"></div> Above ...

htmlcss

Dynamically adjusting CSS Max-Height according to scroll position

Is there a CSS only technique to achieve the following scenario: An element is positioned absolutely at x,y coordinates on the screen. The document includes a vertical scrollbar depending on its content. Can the height of the element be adjusted based on ...

htmlcss

unable to display content from an external page within a DIV element

Here is the code I am using to load an external file inside a div: EXAMPLE <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.re ...

jqueryhtmlcss

The overlay image is not positioned correctly in the center

I am struggling with positioning a play icon overlay on the image in my list-group-item. The current issue is that the icon is centered on the entire list-group-item instead of just the image itself. I am working with bootstrap 4.4.1. Here is the HTML str ...

htmlcssbootstrap-4

What is the best way to ensure that only one accordion tab remains open at a time, preventing it from closing unless a different tab

How can I ensure that only one accordion tab is open at a time, automatically closing any others that are currently open? Here is my current code for the accordion: $('[data-bs-toggle="collapse"]').on('click', function(e) { if ($( ...

javascriptjquerycssbootstrap-5

Steps for designing a footer with a fixed width and transparent center gap that stays in place

Looking to create a fixed footer with a transparent gap at the center that is 100% fixed width? No scripts needed! EXPAND THIS WAY <<< ______ FIXED WIDTH GAP ______ >>> EXPAND THIS WAY MY OWN SOLUTION HTML <div id="Ftr"> ...

htmlcsssticky-footer

Ignoring CSS transitions by changing the width property in JavaScript’s element.style

When attempting to create a smooth progress bar animation by adjusting the width using document.querySelector('#mydiv').style.width = '20%', I noticed that the new width is updated instantly rather than transitioning smoothly. It seems ...

javascriptcss

Updating form validation by altering input value

I'm currently utilizing JavaScript regular expressions for form validation in my project. After successfully completing the validation without any errors, upon clicking the submit button, I want the form to be submitted and change the submit value to ...

javascriptjqueryhtmlcss

Alternate. (individually)

Issue with Running Program I've been struggling to get my program to run correctly. The task at hand is to have the program display only one question at a time. But no matter what I try, clicking on all questions displays all the answers simultaneous ...

javascripthtmlcss

Avoid automatic semicolon insertion in Visual Studio Code

Currently, I am utilizing Visual Studio Code for my coding tasks. I specifically do not prefer the auto insertion of semicolons after CSS properties by VS Code. However, it keeps providing me with an autocomplete option that I find undesirable. Is there a ...

cssvisual-studio-codeautocomplete

Tips on determining if a string is a properly formatted HTML:

My question is about checking whether selected strings in a web form are valid HTML syntax. How can I achieve this on a button click? function chkhtml() { var code = $("<table><td>"); code.each(function () { if( ...

jqueryhtml

Scrolling container embedded within a parent with absolute positioning

I have encountered a tricky situation with an absolute positioned div and its nested div having overflowing content. My goal is to enable vertical scrolling for the child div, however, my attempts so far have been unsuccessful. The challenge here is that I ...

htmlcss

Is it possible to meta-refresh a page for redirection?

When creating a webpage, I included a META tag like this: <META http-equiv="refresh" content="5;URL=http://www.google.com"> The issue is that mobile browsers do not support this meta tag. It redirects properly on web browsers, but not on mobile dev ...

javascriptphphtmlmeta-tags

Iterating through every image displayed on a webpage

Two inquiries: What is the best way to efficiently loop through every image on a specific webpage and open each one in a new browser tab? Similar concept, but instead of opening in a new tab, I am interested in substituting different images for the ...

javascripthtmldom

What is the best way to symbolize a breadcrumb offspring?

In my table representation, the breadcrumb is shown as: <ol class="breadcrumb" data-sly-use.breadcrumb="myModel.js"> <output data-sly-unwrap data-sly-list="${breadcrumb}"> <li itemscope itemtype="http://data-vocabulary.org/ ...

javascripthtmlbreadcrumbssightly

Tips for storing form information using Flask and Vue.js

Currently, I am tackling a straightforward assignment that requires me to utilize tools with which I am not very familiar. In this task, I need to find a way to save the form data (preferably to a text file as the optimal solution) or at least serialize it ...

htmljsonformsvue.jsflask