Utilizing a div element for creating a clipping mask with CSS

I am facing a challenge with a background image that has been set to background-size:cover; and a series of overlaid divs that I would like to convert into separate clipping masks.

I have explored the clip: rect(20px, 20px, 20px, 20px,) feature, but since the divs are dynamically generated by a CMS, it is not feasible to define fixed sizes.

Is there a method to apply a clipping mask property to the div so that it clips the image wherever the div is positioned on the page?

I would prefer not to use an image overlay as the website needs to be responsive.

Answer №1

It seems like you are in need of an overlay that can adjust its size according to the screen size, along with a background image in a div. One approach you could consider is nesting these divs inside the one that requires clipping, as shown in this example. In this demonstration, I have used a single div with a transparent background and a border. For more complex shapes like parallelograms, diamonds, or triangles, you may require additional divs (at least 2).

Unfortunately, CSS does not support percentage borders, but the provided example might still be helpful. Alternatively, you can place your image div inside the clipper divs; choose the method that suits your layout the best.

body, html { 
  /* required for percentage sizing of child elements */
  width: 100%;
  height: 100%;
}
#tobeClipped {
  width: 80%;
  height: 40%;
  position: relative;
  background-image: url('http://cdn.theatlantic.com/static/infocus/ngpc112812/s_n01_nursingm.jpg');
  background-size: cover;
}
#tobeClipped>div {
  position: absolute;
}
#clippers {
  width: 100%;
  height: 100%;
  border: 20px solid grey;
  border-left-width: 100px;
  box-sizing: border-box;
}
<div id="tobeClipped">
    <div id="clippers"></div>
</div>

If this solution does not meet your requirements, please provide further clarification on what you are seeking.

Answer №2

The clip-path attribute in CSS has the ability to be utilized on a wide range of elements including HTML elements, SVG graphic elements, and SVG container elements:

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

What could be the reason behind the lack of vertical centering for the Spartan

I can't seem to figure out why my font isn't aligning vertically correctly. I'm using the Spartan MB font from Google, but it just doesn't look right, you can see here. https://i.stack.imgur.com/wbLc2.png This is my HTML code: <htm ...

There seems to be an issue with Jekyll where it is failing to generate HTML for Markdown pages

I recently delved into the world of Jekyll to transfer my blog over to GitHub Pages. Utilizing a local Jekyll tool (jekyll 3.1.3) with the neo-hpstr-jekyll-theme as a starting template on my Windows system. While the entry point (index.html in root) and p ...

Issue with Angular FormControl Pattern Validator failing to validate against regex pattern

My goal is to restrict a text input field to specific characters only. I am looking to allow: alphanumeric characters (a-z A-Z 0-9) 3 special characters (comma, dash, single quotation mark) : , - ' A few accented characters: à â ç è é ê î ô ...

Exploring the font variables in the asset pipeline of Rails 7

Creating a habit of defining a set of root variables is crucial for maintaining consistency throughout an application. :root { --main-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; --kbd-font-family: Consolas, "Libe ...

What is the best way to format FormControl for proper spacing?

<FormControl fullWidth component="fieldset" inputRef={register({ required: true })}> <FormLabel component="legend">Format</FormLabel> <RadioGroup row aria-label="format&q ...

Issue with flex item not expanding to fill entire height within flex container

My markup contains the following code: .container { display: flex; width: 500px; } .col1 { background: red; height: 100%; width: 50px; } .col2 { background: blue; flex: 1; height: 200px; } <div class="container"> <div class= ...

Arrange divs in vertical columns

My markup is fixed and I am only allowed to add <div> elements to the container. Here is the current structure: <div class="container"> <div class="box" id="box1">1</div> <div class="box" id="box2">2</div> < ...

How can I dynamically alter the width of a Bootstrap progress bar using the {{$percentage}} variable in a Laravel stylesheet?

I am currently working on a project where I aim to display the percentage of marks obtained using a progress bar. I have the percentage value and I am trying to pass this value in the style: "width:{{$percentage}}" so that the progress bar width changes a ...

Having trouble with accessing the upvote/downvote input within a Django template

Currently, I'm trying to retrieve upvote/downvote data from a Django template in the following manner: <form method="POST" action="{% url 'vote' %}" class="vote_form"> {% csrf_token %} <input type="hidden" id="id_value" name="valu ...

Is there a way to position labels above their corresponding elements using this customized input style?

My CSS for styled inputs has become too complex, making it difficult to remove and fix certain elements. Specifically, I am facing issues in getting labels positioned above my input fields, select options, and output section. /* Cus ...

Creating a Stylish ExtJS Container with CSS: A Step-By-Step

I've been experimenting with the ExtJS properties cls, bodyCls, and componentCls but unfortunately, I'm not achieving the desired outcome. As an illustration: Ext.create('Ext.form.Panel', { renderTo: document.body, title: &apo ...

Can Selenium be used to retrieve a list of pinned IDs from a website?

I am currently developing a web scraper that is required to open multiple tabs of items with filled icons. Specifically, each page that needs to be opened contains the div class="course-selector-item-pinned" in its source code. <dropdown-conte ...

I aim to have the capability to read numbers entered into text fields within a form prior to the form being submitted

I am currently working on a website where users can create brackets for the World Cup by guessing scores and winning teams. Right now, they have to manually fill in the bracket. I would like to implement a feature that reads what users are inputting while ...

Determining the identity of an HTML element using its surrounding values

I have a webpage with a table displaying various services and their corresponding download buttons. Here is an example of the content: nov. service 1 [ click to download pdf ] nov. service 5 [ click to download pdf ] nov. service 3 [ ...

Tips for designing a unique mosaic using flex technology

I am attempting to design a unique mosaic layout using flexbox that resembles the image provided: https://i.sstatic.net/jrHvb.jpg Each box should have a width equivalent to one-third of the parent container, except for box 4 which needs to be double the ...

Prevent Scrolling on Body with W3 CSS

While implementing scroll body lock packages like body-scroll-lock, react-scrolllock, or tua-body-scroll-lock alongside the W3 CSS package, I have encountered an issue where the body remains unlocked even when the designated element is active or open (e. ...

The alignment of the JQuery Mobile tabs is off

As I work on developing a Cordova app, I've noticed that the tabs on my Android phone display in an unusual way. Here's what they look like: The image above was created in JSFiddle using JQuery 2.1.0 and JQM 1.4.2 selected with the following co ...

How to adjust the size of a div based on its child content, including margins

I have encountered an issue with animating the height of a configurable content div, which typically contains paragraphs of text. Shown below is my animation (slowly paced), starting from a height of 0 and expanding to its calculated height based on its c ...

When implementing flex-grow 1 on a flex box, the remaining space is not being filled as expected

I am struggling to make the green div fill the remaining space of a flex box container. My goal is to have the top row (blue) adjust its height based on content, and then have the row below (green) take up the rest of the space. However, it seems like the ...

Guidelines for aligning a form in the middle of the screen (positioned between the navigation bar and footer

Before asking this question, I made sure it's not a duplicate by researching previous similar issues with no success. I'm currently utilizing Bootstrap 4. You can view my app at (I'm unable to post the CSS and HTML of my React app due to S ...