blocks that are not in the shape of a rectangle and have a background attachment

Having an issue with a v-shaped bottom as shown here. The goal is to trim the corners of the block while maintaining the fixed background (background-attachment: fixed) for scrollability and visibility through the v-bottom. Additionally, the angle must remain consistent across all blocks, making the scalable nature of the SVG mask unusable in this case due to the need for fixed angles. Each block has a different height.

I've been struggling with this problem for a few days now... any help would be greatly appreciated...

PS: Both blocks captured in the screenshot (yellow and dark) only vary by content and background image, so they both require v-typed triangular bottoms with fixed backgrounds.

Edit: Cross-browser support is necessary.

htmlcsssvg

Answer №1

I experimented with the CSS property 

clip-path: polygon(0 0,100% 0,100% 80%,50% 100%,0 80%);
but encountered an issue where you cannot specify a distance of 60 pixels from the bottom.

For a demonstration, check out this Fiddle

Answer №2

My approach to solving this issue would involve utilizing three separate div elements. The outermost div would have a dark or black background color.

The second div would be nested within the outermost div and have a yellow background color.

To create the illusion of a V shape disappearing into the background, I would design a transparent PNG image in the shape of a V and overlay it on top of the inner (yellow) div. By aligning the bottom of the V-shaped div with the bottom of the inner div, it will appear as though the shape is vanishing into the background.

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

You can use HTML tags within a script tag for added flexibility and

I'm working on incorporating this into a dynamic script using data from an XML file (aiming for 50% to be dynamic). <div class="progress-bar progress-bar-danger" data-progress-animation="50%" data-appear-animation-delay="20"> It currently func ...

javascriptjquerycsshtml

Fading away backdrop images for the header

I've created a header class in my CSS with the following styling- header { background-image: url('../img/header-bg.jpg'); background-repeat: none; background-attachment: scroll; background-position: center center; .backg ...

javascriptjqueryhtmlcss

Ensure that breadcrumb links remain on a single line by using text truncation in Bootstrap 5

For creating breadcrumbs in Bootstrap 5, the documentation suggests the following code: <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home ...

cssbootstrap-5

Trouble arises when attempting to bind a JavaScript event with an innerHTML DOM element

I am currently dealing with a complex issue on how to bind a JavaScript event to an innerHTML DOM element. The scenario involves having a div with an input checkbox inside it, along with some pre-existing JavaScript event bound to that checkbox. Additional ...

javascriptjqueryhtmlcssdom

Sharing images and descriptions on Twitter and Facebook using the `react-share` package: A step-by-step guide

This is the code I'm using for my helmet. <Helmet> <meta property="og:image" content={shareImg} /> <meta property="og:image:secure_url" content={shareImg} /> </Helmet> Here is the snippet of code for Twitter and Facebook ...

javascripthtmlreactjsnpm

Lengthen the space between each item on the list to enhance readability

Is there a way to adjust the line height between li tags? I attempted using height:100%, but it seems ineffective. Are my methods correct? Can anyone provide guidance? The following is the code snippet in question: <html xmlns="http://www.w3.org/1999 ...

htmlcss

Internet Explorer 9 fails to recognize angular objects when used inside ngRepeat

One issue I encountered was with the ng-include and ng-controller nested inside an ng-repeat, causing some unexpected behavior in Internet Explorer: Here is a snippet from main.html: <section ng-repeat="panel in sidepanels"> <h2 class="twelve ...

javascripthtmlinternet-explorer-9angularjs

Combining various postponed JavaScript file imports in the HTML header into a single group

I've been facing an issue with my code structure, particularly with the duplication of header script imports in multiple places. Every time I need to add a new script, I find myself manually inserting <script type="text/javascript" src=&q ...

javascripthtmljquery

Leverage jQuery to dynamically update a second select list depending on the chosen option in the first select list

I am faced with a dilemma that requires me to make use of two select elements: <select name="select1" id="select1"> <option value="1">Color</option> <option value="2">Size</option> <option value="3">Shape< ...

jqueryhtmlselect

Steps for transforming div content into an image

My goal is to save an image into my local storage for future use. Currently, I have a div with some content inside. I have attempted to use canvas2Image methods without success. Here is my code: $(document).ready(function () { alert("hello"); va ...

jqueryhtml

Employing XPATH to locate specific text content enclosed within one div and nested within another div

<?xml version="1.0" encoding="UTF-8"?> <div id="app" class="grid bg-local font-body justify-center" style="background-image: url(&quot;/img/picture.jpg&quot;);"> <div data-v-f7g8b ...

htmlcssxmlseleniumxpath

Steps for Converting Unicode Characters to HTML Encoding in C++

Can you assist me with converting unicode characters like the ones below in C++? Thére Àre sôme spëcial charâcters ïn thìs têxt عربى I need to convert them to HTML encoding as shown below: Th&eacute;re &Agrave;re s&ocirc;me sp&am ...

htmlc++encoding

Modifying the href in Django according to the current page URL: a step-by-step guide

Like the title suggests, I'm curious about the proper way to dynamically change a link's href based on the current URL that the user is visiting. I attempted a solution, but it proved unsuccessful. {% if url == '' %} href='/cooki ...

pythonhtmldjango

"Transcribe as HTML" for embedded IFrame components within Chrome's Inspector tool

When using Chrome's web inspector, there is a helpful "Copy as HTML" option when you right-click on a DOM element. However, it seems that this feature does not include the contents of IFrame tags, even though they are displayed in the inspector as chi ...

htmlgoogle-chromedomiframegoogle-chrome-devtools

Using jQuery and Ajax to fade in content after all images and other assets have finished loading

I've encountered an issue with loading pages via ajax for users with custom URLs. For example, a profile is usually found at http://example.com/users/Dan, but if a user has a custom URL like http://example.com/DansCustomURL, I need to fetch their desi ...

javascriptjqueryhtmlajax

Combine all the HTML, JavaScript, and CSS files into a single index.html file

So here's the situation - I am utilizing a C# console application to convert four XML files into an HTML document. This particular document will be circulated among a specific group of individuals and is not intended to be hosted or used as a web app; ...

javascriptc#htmlcsswebpack

The Angular controller fails to display any data when inserted within double curly braces on the HTML page

I have been working on a basic binding application using TypeScript. I created a controller called 'bugCtrl' and it appears to be functioning correctly in debug mode (with console.log and alert statements). Below is the HTML code from my page: & ...

angularjshtmltypescriptcontroller

Understanding AngularJS and how to effectively pass parameters is essential for developers looking

Can anyone help me figure out how to properly pass the html element through my function while using AngularJS? It seems like this method works without AngularJS, but I'm having trouble with the "this" keyword getting confused. Does anyone know how I c ...

javascripthtmlangularjs

What steps can be taken to deter users from bookmarking URLs?

On my website, the webpages are dynamically generated using the GET method to fetch variables from a specified URL. For instance, consider the code on the main page: index.php <p><a href="/dynamic.php?name1=value1&amp;name2=value2">next p ...

phphtmlformsurlget

Is it necessary to include the Fonts file (which accompanies Bootstrap files) in the HTML document?

As a beginner in HTML, I decided to incorporate Bootstrap into my project. After downloading the necessary files, including css, js, and fonts, I found myself able to easily add the css and js files using the appropriate tags. However, I encountered some c ...

htmlcssbootstrap-4