What's the best way to move a CSS shape off the bottom of the screen?

Question

What's the best way to move a CSS shape off the bottom of the screen?

I'm attempting to recreate this design concept.

https://i.sstatic.net/BmFNS.png

I was able to push the top circular shape out of the screen as shown in the image. However, I'm facing an issue with the bottom shape - it's just extending the webpage instead of going off the screen. How can I push it out of the screen like in the example?

#circleTop {
    width: 55rem;
    height: 55rem;
    background-image: linear-gradient(120deg, red, yellow);
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    left: 60%;
    top: -35rem;
}

#circleBottom {
    width: 50rem;
    height: 50rem;
    background-image: linear-gradient(120deg, green, blue);
    border-radius: 50%;
    position: relative;
    z-index: -1;
    right: 45%;
    bottom: -35rem;
}

<div class="header">
            <div id="circleTop"></div>
            <div class="headerBox">
                <h1>Headline</h1>
                <h2>Subheading</h2>
            </div>
        </div>
 ....

<div class="footer">
           <div id="circleBottom"></div>
            <div class="section">
                <a href="#">Link</a>
                <a href="#">Link</a>
            </div>
            <div class="otherLinks">
                <p>Lorem Ipsum Dolor Sit Amet</p>
            </div>
        </div>

html css css-shapes

Answer 1

Answer №1

In my opinion, the existing answers are on the right track but lack completeness. If you wish for your circle to be 'cut off' and not visible when scrolling down, it must be enclosed within another element that restricts its visibility. While using position:absolute; is a step in the right direction, it will position the element relative to the nearest containing element with a defined position - which is why adding position:relative; to your footer div is necessary. Additionally, ensure that the part of the circle meant to be hidden is indeed concealed by utilizing overflow:hidden. The following code snippet should guide you in achieving this:

.footer {
  position:relative;
  overflow:hidden;
}

It may not always be appropriate to apply these styles directly to the footer div, but the concept remains the same. Overflowing elements will remain visible and cause scrolling unless explicitly instructed otherwise. Therefore, creating the illusion of overflowing content by concealing or 'cropping' it within another element is key. While some suggest applying these styles to the body or html elements, opting for an element closer to the one you wish to hide is usually more consistent. For instance, setting a fixed height or using 'overflow:hidden;' on the body can prevent scrolling if additional content exceeds the screen height.

Answer 2

In my opinion, the existing answers are on the right track but lack completeness. If you wish for your circle to be 'cut off' and not visible when scrolling down, it must be enclosed within another element that restricts its visibility. While using position:absolute; is a step in the right direction, it will position the element relative to the nearest containing element with a defined position - which is why adding position:relative; to your footer div is necessary. Additionally, ensure that the part of the circle meant to be hidden is indeed concealed by utilizing overflow:hidden. The following code snippet should guide you in achieving this:

.footer {
  position:relative;
  overflow:hidden;
}

It may not always be appropriate to apply these styles directly to the footer div, but the concept remains the same. Overflowing elements will remain visible and cause scrolling unless explicitly instructed otherwise. Therefore, creating the illusion of overflowing content by concealing or 'cropping' it within another element is key. While some suggest applying these styles to the body or html elements, opting for an element closer to the one you wish to hide is usually more consistent. For instance, setting a fixed height or using 'overflow:hidden;' on the body can prevent scrolling if additional content exceeds the screen height.

Answer 3

Answer №2

To implement a unique design for your webpage, make sure to include the following elements in your body and CSS:

body{
  position: relative;
  height: 100vh;
  overflow: hidden;
}
#circleTop {
    width: 55rem;
    height: 55rem;
    background-image: linear-gradient(120deg, red, yellow);
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    right: -25rem;
    top: -25rem;
}

#circleBottom {
    position: absolute;
    width: 55rem;
    height: 55rem;
    background-image: linear-gradient(120deg, green, blue);
    border-radius: 50%; 
    z-index: -1;
    left: -25rem;
    bottom: -25rem;
}

<body>
  <div class="header">
    <div id="circleTop"></div>
    <div class="headerBox">
      <h1>Impressive Title</h1>
      <h2>Captivating Subtitle</h2>
    </div>
  </div>

  <div class="footer">
    <div id="circleBottom"></div>
    <div class="section">
      <a href="#">Visit Now</a>
      <a href="#">Learn More</a>
    </div>
    <div class="otherLinks">
      <p>Fantastic Content Here</p>
    </div>
  </div>
</body>

Answer 4

To implement a unique design for your webpage, make sure to include the following elements in your body and CSS:

body{
  position: relative;
  height: 100vh;
  overflow: hidden;
}
#circleTop {
    width: 55rem;
    height: 55rem;
    background-image: linear-gradient(120deg, red, yellow);
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    right: -25rem;
    top: -25rem;
}

#circleBottom {
    position: absolute;
    width: 55rem;
    height: 55rem;
    background-image: linear-gradient(120deg, green, blue);
    border-radius: 50%; 
    z-index: -1;
    left: -25rem;
    bottom: -25rem;
}

<body>
  <div class="header">
    <div id="circleTop"></div>
    <div class="headerBox">
      <h1>Impressive Title</h1>
      <h2>Captivating Subtitle</h2>
    </div>
  </div>

  <div class="footer">
    <div id="circleBottom"></div>
    <div class="section">
      <a href="#">Visit Now</a>
      <a href="#">Learn More</a>
    </div>
    <div class="otherLinks">
      <p>Fantastic Content Here</p>
    </div>
  </div>
</body>

Answer 5

Answer №3

For the bottom left circle, use the following CSS class:

#circleBottom {
    width: 50rem;
    height: 50rem;
    background-image: linear-gradient(120deg, green, blue);
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    left: -15%;
    bottom: -15%;
}

Check out this Circle example for reference.

Answer 6

For the bottom left circle, use the following CSS class:

#circleBottom {
    width: 50rem;
    height: 50rem;
    background-image: linear-gradient(120deg, green, blue);
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    left: -15%;
    bottom: -15%;
}

Check out this Circle example for reference.

What's the best way to move a CSS shape off the bottom of the screen?

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing the Jquery Kenburner Slider: Playing a Local Video File

Can CSS be used to consistently position content in a specific manner?

Transition from Material UI styles to SCSS equivalent

Library of CSS styling information

Creating a CSS tag for a group of radio buttons involves styling the input elements for

The dual-column format is experiencing technical difficulties

What are some effective techniques for personalizing Bootstrap?

Browsing with PHP/HTML on Safari from Mac Os 10.6.5 seems to run at a sluggish pace

Discover how to execute a function depending on a specific button in Node.js using Express

Extract the #id parameter from the URL using jQuery

Issues arise when attempting to determine the accurate dimensions of a canvas

Utilizing the Bootstrap grid system allows for input fields to automatically expand to 100% width once they reach

Disappearing Div Dilemma: The Mystery of the Responsive Design

Using CSS to style PHP function results

Ways to Customize the Text Color in the Navigation Bar

creating a stacked image effect with css

Creating a stylish web page with smooth, rounded corners using CSS styling techniques

A specific image is loading after being clicked in a new page

Why do I need to control-click in order to download the link?

Tips for resolving: 404 error when attempting to load a popup using Ajax