div宽度大于100％，并将溢出的部分隐藏在视口之外

Question

I am working on a css piece where I need to render a circle at the top of the div. I got to do that with border radius.

But I wanted to get a smoother curve, so I got to increase the width and align it using left value. But now I get a horizontal scroll bar in the page. Is there a way to avoid the horizontal bar. I tried to overflow values and that didn't seem to help.

PS: This is for < 700px media query.

#semi-circle {
    height: 70%;
    width: 180%;
    border-radius: 235px 235px 0 0;
    -moz-border-radius: 235px 235px 0 0;
    -webkit-border-radius: 500px 500px 0 0;
    background-color: red;
    top: 157px;
    margin-right: 0;
    left: -215px;
    overflow: auto;
}

https://jsfiddle.net/5oorwmxd/1/

Answer 1

You need to wrap your div with another, and then overflow-hidden the wrapping element. For instance:

https://jsfiddle.net/5oorwmxd/3/

CSS:

.wrapper{
  overflow:hidden;
  width:100%;
}

HTML:

<div class="wrapper">
  <div id="semi-circle">test</div>
</div>

Answer 2

Can you put it inside a container with 100% width and hidden overflow?

<div class="container">
     <div id="semi-circle">test</div>
</div>

and CSS

.container {width:100%; overflow:hidden;}

https://jsfiddle.net/6q8nndzL/

Answer 3

To achieve what you want you can just use the border-top-left-radius property instead of using the shorthand border-radius .

---

jsFiddle

---

CODE SNIPPET:

 #semi-circle { background-color: tomato; padding-left: 15px; transition: border-top-left-radius 1s ease-in; } @media (max-width: 700px) { #semi-circle { border-top-left-radius: 235px; } } 

 <div id="semi-circle">test</div> 

---

NOTES:

You have several things wrong in your code.

First, you cannot set top, left, right or bottom values if your element's position is static, which is the default position value for every element. So just remove those properties.

Second, using a percentage in height requires the element's parent to have a defined height, which in this case it does not, so remove it.

There's no need to increase the width , nor set margin-right to 0.