user3861559 user3861559 - 3 months ago 7
CSS Question

div width greater than 100% and hide overflowing part out of the viewport

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

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>