Using CSS Clip Path to conceal elements

My current design uses clip-path for a gradient effect at the top of the page. Ideally, I want the two angles to meet seamlessly without any visual issues.

I initially positioned the top so that they touch perfectly and nothing interferes with the angled content. Specifically, I used top: -120px; but later switched to margin-top: -120px;. The change looks good and the positioning seems acceptable, but I'm open to suggestions for improvement.

The problem arises when the content gets stuck underneath as shown below:

.site-hero-colour {
    min-width: 100%;
    max-width: 100%;
    min-height: 600px;
    max-height: 600px;
    background: linear-gradient(-45deg, #FFFFFF, #000000);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
    margin: 0;
    padding: 0;
    position: relative;
}

@media only screen and (max-width: 500px) {
.site-hero-colour {
    min-width: 100%;
    max-width: 100%;
    min-height: 400px;
    max-height: 400px;
    background: linear-gradient(-45deg, #FFFFFF, #000000);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
    margin: 0;
    padding: 0;
    position: relative;
}
}

.site-hero-content {
    min-width: 100%;
    min-height: 160px;
    background: #FFFFFF;
    clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
    position: relative;
    margin-top: -120px;
    margin: 0;
    padding: 0;
}

@media only screen and (max-width: 500px) {
.site-hero-content {
    min-width: 100%;
    min-height: 160px;
    background: #FFFFFF;
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
    position: relative;
    margin-top: -40px;
    margin: 0;
    padding: 0;
}
}
<div class="site-hero-colour"></div>
<div class="site-hero-content">
   <h1>The content is getting cut off. It should overlay the white space or align perfectly.</h1>
</div>

One alternative solution could be like this:

.site-hero-colour {
    min-width: 100%;
    max-width: 100%;
    min-height: 600px;
    max-height: 600px;
    background: linear-gradient(-45deg, #FFFFFF, #000000);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
    margin: 0;
    padding: 0;
    position: relative;
}

@media only screen and (max-width: 500px) {
.site-hero-colour {
    min-width: 100%;
    max-width: 100%;
    min-height: 400px;
    max-height: 400px;
    background: linear-gradient(-45deg, #FFFFFF, #000000);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
    margin: 0;
    padding: 0;
    position: relative;
}
}

.site-hero-content {
    min-width: 100%;
    background: pink;
    clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
    position: relative;
    margin-top: -120px;
    margin: 0;
    padding: 0;
}

@media only screen and (max-width: 500px) {
.site-hero-content {
    min-width: 100%;
    background: pink;
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
    position: relative;
    margin-top: -40px;
    margin: 0;
    padding: 0;
}
}

.new {
  background: blue;
}
<div class="site-hero-colour"></div>
<div class="site-hero-content"></div>
<div class="new"> <h1>This gets cut off. It should sit on top of the white space or be positoned to match up.</h1></div>

In this new setup, the content moves down once the height limitation has been removed for that element. I am seeking opinions on better approaches than using top or having an empty DIV here. Any feedback or alternative strategies would be greatly appreciated. Thank you.

css

Answer №1

Are you thinking of dividing a square into two polygons?

You can achieve this using the calc clip-path property as shown below.

.site-hero-colour {
      min-width: 100%;
      max-width: 100%;
      min-height: 600px;
      max-height: 600px;
      background: linear-gradient(-45deg, #FFFFFF, #000000);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 100px));
      margin: 0;
      padding: 0;
      position: relative;
    }

    @media only screen and (max-width: 500px) {
      .site-hero-colour {
        min-width: 100%;
        max-width: 100%;
        min-height: 400px;
        max-height: 400px;
        background: linear-gradient(-45deg, #FFFFFF, #000000);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
        margin: 0;
        padding: 0;
        position: relative;
      }
    }

    .site-hero-content {
      min-width: 100%;
      background: pink;
      /* clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%); */
      clip-path: polygon(0 0, 100% 100px, 100% 100%, 0 100%);
      position: relative;
      margin: 0;
      padding: 0;
      padding-top: 100px;
    }
<div class="site-hero-colour"></div>
  <div class="site-hero-content">
    <h1>This gets cut off. It should sit on top of the white space or be positoned to match up.</h1>
  </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

Having issues with my CodePen React code and its ability to display my gradient background

I will provide detailed descriptions to help explain my issue. Link to CodePen: https://codepen.io/Yosharu/pen/morErw The problem I am facing is that my background (and some other CSS elements) are not loading properly in my code, resulting in a white bac ...

javascripthtmlcssreactjscodepen

What could be causing the input submit in my form to be unresponsive when clicked?

I'm stumped on what's causing the issue. My sign-up form seems to be malfunctioning - when I click the "Complete Registration" button, nothing happens! The form doesn't even submit. Here is the HTML structure: <!DOCTYPE html> <html ...

phphtmlcssforms

Apply the cursor property to the audio element and set it as a pointer

I have a question: how can I apply a cursor style to my <audio> controls? When I try to add them using CSS, the cursor only appears around the controls and not directly on the controls themselves. Below is the code snippet: <audio class="_audio" ...

javascripthtmlcss

Place information from an input field into a specific row within a table

Utilizing Angular 4, I am developing a frontend application for a specific project. The interface features a table with three rows that need to be filled with data from an external source. https://i.stack.imgur.com/Dg576.png Upon clicking the "aggiungi p ...

htmlcssangulartypescript

Adjust the image size using CSS within the containing outer div

I am trying to adjust the width of an image using css within typo3. Unfortunately, I only have access to the outer div container which is the custom border of the content element. To make the change, I added the following line to my css file: .Bild-Starts ...

csstypo3

What measures can be taken to stop LESS partials from compiling independently?

When working with LESS, I utilize partials that are included (@include) into the main LESS stylesheet. A common issue I face is that each partial ends up compiling to its own CSS file, leading to project clutter. In SASS, if a file is named with an unders ...

csslessphpstorm

Ways to minimize excessive gap between two columns in Bootstrap

How can I reduce the space between two form-groups without moving the email address field with CSS left margins? When I try to make the first column smaller, it automatically wraps to the next line, but I want the email address to be closer to the phone ex ...

htmlcsstwitter-bootstrap

Why does the text in a div display in Safari 8.2 and Chrome 39, but not in Firefox 34?

In my HTML document, I have a div tag located within the body like so: <div id="content_text"></div>​ Using javascript, I later set the contents of the div like this: var content_text = document.getElementById("content_text") c ...

javascripthtmlcssfirefox

An element featuring a background color is vertically aligned in the middle of its parent container

Struggling to achieve a seemingly simple task, but coming up short on finding a solution. The goal is to have a background-color that aligns vertically in the middle of the first and last images in a stack of images. It may sound more complicated than it a ...

javascripthtmlcssalignment

What might be causing the in-viewport javascript to not work in my code?

Why is my in-viewport JavaScript code not functioning properly? Link to JSFiddle code When the Click to move button is clicked, the cat image will slide correctly. However, when implementing the following code: if($("#testtest").is(":in-viewport")) ...

javascriptjqueryhtmlcss

Mixing CSS layers

Applying this particular css: .addProblemClass{ width:300px; height:300px; /*width:25%; height:40%;*/ border:solid 1px #000000; margin: 5px; background-color:#FFFFFF; padding:5px; opacity:0.9;/*For chrome and mozilla*/ ...

csshtmloverlap

Guide to Incorporating a Marker into an SVG Blinking Rectangular or Circular Border Image on Google Maps

I have a link that points to a specific location on Google Maps using latitude and longitude: http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png Now, I am looking to add a blinking border to this marker link. Is there a way to achieve this ...

javascripthtmlcssimagephotoshop

Leverage CSS to manipulate image attributes

Is it possible to use CSS programmatically to set the attributes of my img tag? <span><img class="img-dollar"></img></span> <span><img class="img-royalty"></img></span> I am looking for a way to specify t ...

htmlcss

Issue with Laravel Blade template not linking CSS files in a subfolder

I am currently facing an issue where the CSS file path in my code is incorrect. The code I have is: {{HTML::style('css/bootstrap/bootstrap.min.css')}} When rendered in the source code, it displays as: http://www.view.local/laravel/css/bootstra ...

htmlcsslaravellaravel-4

Adjust and modify class when resizing the window

I've encountered a challenge with my Bootstrap Modal when trying to set the width to 750px on large desktops. When resizing the window to a smaller size, the modal loses its responsiveness. To tackle this, I added a class to the modal to give it a fix ...

jquerycssbootstrap-modal

Achieving consistent text alignment in HTML and CSS without relying on tables

As I delve into the world of HTML and CSS, I've taken a traditional approach by crafting a login page complete with three input controls (two text inputs and one button). To ensure proper alignment of these elements, I initially turned to the trusty & ...

javascripthtmlcssuser-interface

Steps to fully eliminate the recent action panel from Django's administrative user interface

Is there a way to completely remove the recent action panel from Django admin UI? I have searched extensively but all the information I find is about clearing the data in the panel from the database. What I'm looking for is a way to entirely eliminate ...

pythonhtmlcssdjango

Allow for separation amongst my cellular components

I have a table with multiple cells and I would like to add some spacing between each <td> element. You can find an example of my code on JSFIDDLE. .line { border-bottom:1px solid black; } .textRotation { -webkit-transform: rotate(-90deg); ...

htmlcss

What is the best way to place a transparent navbar on top of a hero image while also adding a functional button to the hero image?

My navigation bar is set to be transparent on top of my hero image, but the buttons on the hero image are not clickable. The nav-bar has a z-index of 1, while my hero image, text, and button have a z-index of -1. This setup causes the button to be unclick ...

htmlcssnavbaroverlayz-index

The XPath for pagination is incorrect

Whenever I try to navigate to the next page, I keep encountering an error from the robot. Can someone help me construct the xpath using either of these snippets: <li title="2" class="ant-pagination-item ant-pagination-item-2" tabind ...

cssseleniumxpathrobotframework