How to prevent this css shape to scroll left and right


Tags: html,css,html5,css3,css-shapes

Problem :

I would like to keep this shape so it is responsive and keeps the same direction, and that it can still scroll down the page. The problem is that because of its size it scrolls left and right, which I wish to avoid.

If I set overflow: hidden; to its parent element (body), it causes all other content to vanish in the bottom when it reaches it.

Is there a way to prevent the page to scroll left and right, to "cut" the extra part? Thank you

Here's the fiddle: https://jsfiddle.net/oytvt0p7/

  #angled-shape { 
    width: 3000px;
    height: 800px;
    background-color: lightgrey;
    margin-top: 50px;
    margin-left: -1000px;
    position: absolute;
    z-index: -1;
    overflow: hidden;

    -ms-transform: rotate(-30deg); /* IE 9 */
    -webkit-transform: rotate(-30deg); /* Safari */
    transform: rotate(-30deg); /* Standard syntax */
}

<div id="angled-shape"></div>


Solution :

You can just set overflow-x: hidden;, so scrolling in y direction will be nevertheless possible:

body {
  overflow-x: hidden;
}

#angled-shape {
  width: 3000px;
  height: 800px;
  background-color: lightgrey;
  margin-top: 50px;
  margin-left: -1000px;
  position: absolute;
  z-index: -1;
  overflow: hidden;
  -ms-transform: rotate(-30deg);
  /* IE 9 */
  -webkit-transform: rotate(-30deg);
  /* Safari */
  transform: rotate(-30deg);
  /* Standard syntax */
}
<div id="angled-shape"></div>


    CSS Howto..

    How to get the system accent color for UWP-Apps?

    How can I modify my four quadrants to allow some “breathing room” between them (HTML/CSS)?

    How to make pure css floating tooltips (absolutely positioned span) dynamically resize to accommodate text

    How to create dropdown menu that appears based on answer from another dropdown menu

    How to resize the width of div left to another which has float:left;?

    Can't figure out how to fix CSS for 3rd party library element

    How to color a responsive table in Bootstrap?

    How to show a notification bar on Top after n seconds with transition from top to down?

    How to make a css 'snail'?

    jQuery: How do I target the clicked element when they all share the same CSS class?

    how to set css to a specific attribute of an input tag

    Dropdown not showing on small screens

    How do I expand this CSS list?

    How to keep the Parent menu hovered while the mouse in child menu in a Dropdown Menu

    How to create a table with fixed layout?

    How to make div elements inside a div background image responsive using css

    How do I make this list not break lines when browser size is changed?

    How do I specify my image's position?

    How to choose font different font-weight? use bolder one or just font-weight?

    How to: Illustrator graphic to web animation [closed]

    How to check multiple conditions within a td in Angular table?

    How to remove the empty space between divs in CSS?

    How to completely show hide tabs on onclick event in HTML CSS Javascript

    How to create border between two divs with dynamically changing heights?

    How to get border width in jQuery/javascript

    How to add multiple css rules at once through Dev-Tools or Firebug

    How to use a different font CSS color for all Internet Explorer browser versions?

    Bootstrap css navbar-inverse dropdown how to change color of checkbox label text

    How can I change styling and test for every page reload [closed]

    How to edit jquery slider