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?
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%
);
}