Looking for a way for the inner div to overlap the outer div while maintaining transparency on both layers

Seeking assistance with a div issue.

I have an inner div that needs to extend beyond an outer div, which is not a problem. However, I am struggling to make the outer div clip where the inner div extends. The challenge is that both divs need to be transparent.

Check out the image below for a visual representation of what I am trying to achieve:

View inner and outer div image

Here is my current progress:

CSS:

.infoBoxOuter {
  border: 10px solid #ffffff;
  padding: 50px;
  width: 300px;
}
.infoBoxInner {
  width: 350px;
}

HTML:

<div class="infoBoxOuter">
  <div class="infoBoxInner">
    <h1 class="white">Lorem Ipsum dolor</h1>
  </div>
</div>

Any assistance on this matter would be greatly appreciated. Thank you in advance.

htmlcss

Answer №1

When aiming for transparency in your design, there are essentially two routes you can take:

  1. Utilize an SVG to create the border shape with a cutout on the side
  2. Create the top, left, and bottom borders using one method (such as adding a border to .infoBoxOuter) and then use pseudo elements to craft the right side with a gap.

Below is an illustration of the second approach. You have the option to style the top-right line and the bottom-right line independently or employ a gradient transitioning from white to transparent, as demonstrated below.

You have the flexibility to adjust the values as necessary for your specific scenario. The example provided aims to mimic the general aesthetics of your reference image and guide you through the implementation process.

html, body {
  height: 100%;
}
body {
  background: linear-gradient(to bottom, midnightblue, steelblue);
}
.infoBoxOuter {
  color: white;
  border-top: 10px solid #ffffff;
  border-left: 10px solid #ffffff;
  border-bottom: 10px solid #ffffff;
  padding: 50px;
  width: 150px;
  box-sizing: border-box;
  position: relative;
}
.infoBoxOuter::after {
  content: '';
  display: block;
  background: linear-gradient(to bottom, white, white 25px, transparent 25px, transparent 140px, white 140px, white);
  width: 10px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}
.infoBoxInner {
  width: 350px;
  box-sizing: border-box;
}
<div class="infoBoxOuter">
  <div class="infoBoxInner">
    <h1 class="white">Lorem Ipsum dolor</h1>
  </div>
</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

Highlighting the current menu item by comparing the URL and ID

Looking to make my navigation menu items active based on URL and ID, rather than href. None of the suggested solutions (like this one, this one, or this one) have worked for me. This is how my Navigation is designed: <nav id="PageNavigation"& ...

javascripthtmljquerycssnavigation

Text within the div element causes the displacement of other adjacent div elements

When the text in mondaySpecial extends to a second line, it pushes tuesdaySpecial-saturdaySpecial further down on the page, disrupting the layout of the divs. The same issue occurs with other specials as well. Is there a way to prevent this from happening? ...

htmlcss

Unusual blue outline spotted on Firefox

Could you please review the following code snippet: http://www.jsfiddle.net/tt13/5CxPr/21 In Firefox, there is a strange blue border that appears when selecting multiple rows by pressing the ctrl button. However, this issue does not occur in Chrome. Thi ...

javascriptjquerycssfirefox

How can I shift the top line to the bottom of the text using CSS?

I am facing an issue with CSS or HTML where I need to move a line from the first circle to the second one, as shown in the image below. Here is the link to my JSfiddle version: https://i.sstatic.net/Pn6rF.jpg JSFiddle code: https://jsfiddle.net/odzuwsdt ...

htmlcss

Items that share identical height and margin values will appear with divergent visual presentations

I am trying to align three horizontal lines so that they are the same height and have an equal spacing between each other. However, due to variations in height and margins, some lines appear larger or smaller than others. How can I ensure they all have th ...

htmlcss

Launching event handlers and applying CSS classes within a single scenario

How can I toggle the visibility of a button based on form field validation in JavaScript? I want to show or hide the button when the .confirm button is clicked, and if the form is valid, add a checkmark to the body element through event listener. The issu ...

javascriptcsseventsconditional-statements

Incorporate a CSS file into your Kohana template

Looking to include a CSS file in my template. I've placed the template.php within the directory: kohana-v3.3.5\application\views. Inside this directory, I also added a folder named "css" where I have my styles.css file containing some code. ...

phpcsskohana

Tips for submitting a form using a GET request when reloading the page

Is it possible to submit a form using a GET request upon page reload in an ASP.NET Core MVC web application? I'm looking for solutions with either Javascript/JQuery or without. Appreciate any guidance provided. Thank you! ...

javascriptjqueryhtmlasp.net-core-mvc

What is causing the ID value to be consistently set to black without any manual input?

I'm currently working on building an "Order form" and my objective is to have a message displayed when the user selects "black" from the dropdown menu. The issue I'm facing is that the value is automatically set to black, causing the statement to ...

javascripthtml

How can I customize the color of the title and property value in Handlebars?

Here is the list I am working with: <li>Equipment Area:{{equipment_area}}</li> <li>Equipment Type: {{equipment_type}}</li> <li>Manufacturer: {{manufacturer}}</li> <li>Model Number: {{model_number}}</li> < ...

htmlcssnode.jshandlebars.js

JQuery animations not functioning as expected

I've been attempting to create a functionality where list items can scroll up and down upon clicking a link. Unfortunately, I haven't been able to achieve the desired outcome. UPDATE: Included a JSFiddle jQuery Code: $(document).ready(function ...

javascriptjquerycss

Customizing Thickness for Tab Labels in MUI 5

I have been trying to adjust the thickness of the label inside a tab using MUI 5, but so far I haven't had success. Here is what I have attempted: interface TabPanelProps { children?: React.ReactNode; index: number; value: number; } funct ...

cssreactjsmaterial-ui

Tips for positioning icons inserted using the :before method

Is there a way to center align an icon added using the :before method? Below is the current code snippet: <div class="button submit"> <a class="submit check_car_search" href="#" >Some Text</a> </div> CSS: .button a{ backgr ...

htmlcss

Tips on aligning the Three.js and HTML/SVG coordinate systems, particularly regarding the y-axis synchronization

I am currently integrating 3D content using Three.js with HTML and SVG content. The synchronization of placement between HTML, SVG, and the 3D world by Three.js's CSSLoader is quite effective. One challenge I have encountered is that the coordinate s ...

javascripthtmlsvgthree.jscoordinate-systems

Expanding on current features with jQuery to enhance the code by incorporating validation checks for input boxes with values

Seeking assistance as a newcomer to the jQuery library. I have existing code that checks for selected values in select boxes and enables the search button accordingly. Now, I need help modifying the code to also check for input values in input boxes simul ...

javascriptjqueryhtmlforms

HTML automatically removes added elements

I have embarked on the journey of developing a task management application. The main functionality I am working on involves appending a new event card to the events div when the submit button of the formlayer is clicked. function reveal() { document.g ...

javascripthtmldom

Could you please suggest a method to position a button that is not entirely on the right side?

As I work on building my website, I am faced with the challenge of aligning a button directly under an image. I have utilized HTML tags and assigned a class to it for CSS styling purposes. However, when it comes to setting the alignment using the 'tex ...

htmlcss

The background image is functioning correctly, but there seems to be an issue with the image overlay

I attempted to design a profile page for my website users to have an image as a banner and their profile photo. I have achieved this: https://i.sstatic.net/kFlrQ.jpg However, when I apply the top-margin to the image, it both moves the image and expands t ...

javascripthtmlcssreactjsreact-bootstrap

Fixing a menu hover appearance

I recently encountered a small issue with the menu on my website. When hovering over a menu item, a sub-menu should appear. However, there seems to be a slight misalignment where the submenu appears a few pixels below the actual menu item. Check out the w ...

javascriptjqueryhtmlcsshover

Having trouble with your PHP web form not sending emails?

I have recently set up an HTML form with a PHP script to email users when they hit 'send it'. However, upon clicking the button, I encountered an error message saying 'Please correct the following error:'. Can someone help me figure out ...

phphtmlformswebforms