Is there a way to make divs into different shapes-CodePudding

I am trying to create two divs (one on top half of page and the other on the bottom half) that look like teeth. The idea is that the top and bottom mouth piece divs will open and close with the scroll of the mouse and reveal the website content. Any idea how to make the each div look like a set of teeth? Would it be easier to just use an image of the teeth and do it like that?

CodePudding user response：

You can add clip-path to two divs for the purpose

Code example

  .jaw {
    height: 100%;
    width: 100%;
    position: fixed;
    background: white;
  }
  .bottom {
    bottom: 0;
  }
  .top {
    clip-path: polygon(
      0% 0%,
      0% 80%,
      20% 20%,
      33% 80%,
      50% 20%,
      66% 80%,
      80% 20%,
      100% 80%,
      100% 0
    );
  }
  .bottom {
    clip-path: polygon(
      0% 100%,
      0% 80%,
      20% 20%,
      33% 80%,
      50% 20%,
      66% 80%,
      80% 20%,
      100% 80%,
      100% 100%
    );
  }

CodePudding user response：

First make a div in html, then you can change the style in css. For a tooth in the lower jaw, you can do this:

.tooth-lower{
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid white;
    }

If you want a tooth for the upper jaw, you must change the border bottom into border top. I hope it helps!