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

What method does Apple use to apply overflow:hidden to elements within position:fixed?

After conducting my own experiments and delving into the topic online, I discovered that elements using position: fixed do not adhere to the overflow: hidden property of their parent element. This also applies to children within the fixed positioned elemen ...

htmlcssoverflowcss-position

Using NextJs to pass a prop as a className

I'm having difficulty figuring out how to pass a prop to a className, and I'm questioning whether it's even possible. For instance, if the prop category is passed into the function as "category1", can I use styles.category in the ...

htmlcssreactjsnext.js

What are some common reasons why CSS and Bootstrap code can unexpectedly break?

I have been working on two tabs (tab-one, tab-two) where one is visible and the other is hidden. However, there has been an issue where the code breaks between the bottom of tab-one and the top of tab-two, causing some portion of tab-two to be occasionally ...

jqueryhtmlcssbootstrap-4

How can we use jQuery to extract an HTML element's external stylesheet and add it to its "style" attribute?

My goal is to extract all CSS references from an external stylesheet, such as <link rel="stylesheet" href="css/General.css">, and add them to the existing styling of each HTML element on my page (converting all CSS to inline). The reason for this re ...

javascriptjqueryhtmlcss

Setting the base font size for different screen sizes in Bootstrap 4 with responsive font sizing techniques

Using the Bootstrap gem in my Ruby on Rails application (version 4.3.1) has been a game changer. Recently, I stumbled upon the responsive font size functionality known as rfs, which was introduced in version 4.3 of Bootstrap. If you want to dive deeper in ...

cssruby-on-railsfontsbootstrap-4font-size

Is it possible to display a React Component code within a <code> tag?

I am in the process of creating a tester page that allows users to interact with a library component and document how it is being used. Here is the library component: render = () => { let component = ( <Slider onSlid ...

javascripthtmlcssreactjs

The @media print rule for Angular 16 in the style.css file is not functioning properly

I'm currently working on an Angular component called ViewTask, which has a template that is rendered inside the app component. The app component also consists of a side nav bar. My goal is to only display the content inside the 'print-section&apo ...

htmlcssangularmedia-queries

Exploring the benefits of using Div and semantic elements in web

After spending more than two months learning HTML, I still find myself uncertain about the most practical coding approach. Despite knowing that it's important not to overthink it, I often wonder if I should stick with simplicity or add extra elements ...

htmlcss

Include the circle.css file in the Angular 4 project by loading it in the head section of the

I am currently working with Angular 4 and would like to incorporate the circle.css styles from cssscript. After downloading the file from the provided link, I placed the circle.css within my something component file. However, when attempting to use &l ...

htmlcssangular

How can I make a 100vh div stick to the screen?

Is there a way to fix a Google map in a div to the screen so that the map on the left side remains fixed while the content on the right side can scroll? I've tried using position:fixed but it doesn't seem to be working. See the pictures below for ...

htmlcss

Tips to prevent the webpage from scrolling to the top when clicking on an anchor with an ID

I have developed a CSS/HTML carousel that consists of 4 slides. The goal is to display the selected slide when clicking on the bottom button (a href). However, I am facing an issue where every time I click on a link, the selected slide appears as intended ...

javascripthtmljquerycss

The CSS grid-template-area feature is not functioning properly in web browsers

Struggling with creating a responsive CSS grid layout for different screen sizes. I want to have five divs on desktop screens and adjust the layout for smaller screens. As a newbie in web development, I'm finding it challenging to get it right. .fir ...

htmlcsscss-grid

The disabled button is not displayed when it is disabled

Encountering an issue specific to Chrome version 60.0.3112.90 where changing the disabled attribute of a button causes it to disappear. A minimal, complete, and verifiable example has been prepared wherein clicking the + button toggles the disabled attri ...

cssangularjstwitter-bootstrapgoogle-chromeoverflow

Overlapping Issue with Angular Bootstrap Dynamic Dropdown Menu

I'm currently working on creating a dynamic menu using Angular and Bootstrap for Angular. My main issue right now is that the submenus are overlapping each other when displayed on the page. To tackle this problem, I started off by referring to the ex ...

htmlcssangularng-bootstrap

Can you guide me on implementing a transition animation through class toggling?

I am facing an issue where certain elements need to be highlighted or unhighlighted conditionally. To achieve this, I have assigned a class called highlight to the elements that require highlighting with a transition animation. The challenge arises when t ...

htmlcsscss-transitions

Using both text and image sprites in a horizontal menu list on a UL element

I am attempting to create a horizontal menu using image sprites and text, but have been unsuccessful so far. Although I have an idea of what I want it to look like, my CSS is not achieving the desired result. This is what my current CSS looks like: < ...

htmlcssmenu

Exploring the possibilities of toggling between a personalized CSS design and a Bootstrap CSS layout

Is it possible to implement a dropdown menu on my sample-page using javascript/jquery in order to switch between a custom layout and a bootstrap layout? ...

javascriptjqueryhtmlcss

How to perfectly position an image within a fixed full screen container

When you click on a thumbnail image, a full-screen overlay with a larger version of the image will be triggered using JavaScript. To ensure that the image is centered and resized inside the black overlay when the browser window size changes, I attempted t ...

javascriptjqueryhtmlcss

Highlighting of tab CSS is not persistent when switching tabs or clicking elsewhere on the page

Using Bootstrap 4, a navigation tab is created. However, upon loading the page, the home tab is automatically loaded but not highlighted. Clicking on any tab will highlight it correctly, but once clicked anywhere else on the page, the highlight disappears. ...

htmlcssbootstrap-4tabs

What is the best way to reverse a condition in CSS?

Here is my HTML/CSS code, I am relatively new to this field. Please let me know if I have overlooked anything. .dropdown-menu>li>a { padding: 3px 5px; } <li> <a id="btn-other-1" href="#"> <!–- I do not want apply css for t ...

htmlcss