1

I am trying to make a website that has a slanted transition from one section to another. So far, I have been able to make a temporary solution using vh. Here is what it looks like:

temp solution

However, not only does the HTML code (below, along with the CSS) for the div look unprofessional, the slider bars are also visible.

<div id = "site">

    <div class = "slant"> </div>

    <div class = "stuff"> h </div>

</div>

.slant {

    border-bottom: 200px solid rgb(var(--grey));
    border-left:       99.6vw solid transparent;
    position:                          absolute;
    top:                                   65vh;

  }

.stuff {

    background: rgb(var(--grey));
    position: absolute;
    top: 85.5vh;
    width: 99.6vw;
    height: 100vh;

}

How could I improve my transition? By this, I mean how can I

  1. hide the scroll bars?
  2. have my elements fit perfectly, from left to right? Right now, there is a small gap on the left side of the transition, I want to remove it.

I want these elements to act as a background for more text to come later, which will be displayed above the transition.

Additionally, does anyone know any better practices to stretch an element's width to the view width in ways other than using "99.6vw"? Or is such a method the preferred practice? Using 100vw gives me the scrollbar, so I reduced it slightly to 99.6.

j08691
  • 204,283
  • 31
  • 260
  • 272
Bubbly
  • 301
  • 3
  • 11
  • You can hide the scroll bars by setting `overflow: hidden`. Try asigning a `left: 0` on `.stuff`. Also if you provide the full HTML & CSS we can better help you. – Paul Burkart Jun 04 '21 at 21:23

1 Answers1

1

body{
  margin: 0;
}

.dark, .light {
  min-height: 50vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dark{
  background-color: darkgrey;
  min-height: calc(50vh + 60px);
}

.dark > div, .light > div{
  font-size: 30px;
  color: black;
  font-family: Arial,sans-serif;
  }

.light{
  background-color: lightgrey;
}

.dark::before{
      content: '';
    display: block;
    width: 0;
    height: 0;
  position: absolute;
    bottom: 0;
      border-bottom: 60px solid lightgrey;
    border-left: calc(100vw - 17px) solid transparent;
}
<section class="dark">
<div>CONTENT 1</div>
</section>
<section class="light">
<div>CONTENT 2</div>
</section>

to avoid overflow at x axis, body must have 0 margin.

Erkan
  • 74
  • 6