How to push CSS shape at the bottom out of the screen?

问题: I'm trying to replicate this mockup. And I successfully pushed that top circular shap out of the screen like in the picture. But the bottom one is just lengthening th...

问题:

I'm trying to replicate this mockup.

Mockup

And I successfully pushed that top circular shap out of the screen like in the picture. But the bottom one is just lengthening the webpage without going out of the screen. How to push it out of the screen like in the picture?

#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>

回答1:

The answers so far aren't wrong, but IMO they are incomplete. If you want to have your circle be 'cut off' and not become visible when you scroll down, it will need to be contained in another element that will restrict its visibility. position:absolute; is part of the solution, but it will position your element in relation to the nearest containing element that has a position defined - so your footer div will likely need position:relative; added. Then, you'll need to make sure the part of the circle that's supposed to be cut of isn't visible even though it overflows the bottom of the footer, so adding overflow:hidden will finish the job. This should get you headed in the right direction:

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

you may or may not actually want that to be applied to the footer div, but the principle is the same...overflowing elements will be visible and cause scrolling unless you tell them not to, so having it overflow the page is really an illusion created by having another element 'crop' or hide the the part that would be overflowing. As some other answers have suggested, you could do that by styling the body or html elements, but the behavior is usually more predictable if you use an element nearer to the one you want to be cut off. For example setting a fixed height or 'overflow:hidden;' on the body would prevent your page from scrolling if you add content that is taller than the screen.


回答2:

You add element body and css as below:

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>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>
</body>


回答3:

Try by using the follow class for bottm left circle

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

Circle example

  • 发表于 2019-03-30 16:57
  • 阅读 ( 201 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除