Estoy tratando de crear dos divs (uno en la mitad superior de la página y el otro en la mitad inferior) que parecen dientes. La idea es que los divs de la boquilla superior e inferior se abran y cierren con el desplazamiento del mouse y revelen el contenido del sitio web. ¿Alguna idea de cómo hacer que cada div se vea como un juego de dientes? ¿Sería más fácil simplemente usar una imagen de los dientes y hacerlo así?
Puede agregar clip-path a dos divs para el propósito
ejemplo de código
.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% ); }