Como todos sabemos, podemos aplicar la sombra usando el atributo Box-Shadow de CSS, pero no es válido si lo aplicamos en el
objeto recortado usando la función Clip-Path() de CSS.
Acercarse:
- Vamos a crear dos divs, uno para el principal y otro para nuestra forma recortada.
- Luego vamos a usar la función drop-shadow() para aplicar efectos de sombra.
Código HTML:
- En primer lugar, cree un archivo HTML (index.html).
- Ahora, después de la creación de nuestro archivo HTML, le daremos un título a nuestra página web usando la
etiqueta <title>. Debe colocarse entre la etiqueta <head>. - Luego vinculamos el archivo CSS que proporciona todas las imágenes de fondo a nuestro HTML. Esto también se coloca
entre la etiqueta <head> . - Llegando a la sección del cuerpo de nuestro código HTML.
- En primer lugar, cree un div principal como cuadro principal.
- En ese div, agregue 1 div más para agregar el objeto clip-path.
index.html
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main_box"> <div class="img"></div> </div> </body> </html>
Código CSS: El siguiente es el contenido del archivo «style.css» utilizado en el código anterior. CSS se usa para dar diferentes tipos de animaciones y
efectos a nuestra página HTML para que se vea interactiva para todos los usuarios. Considere los siguientes puntos:
- Restaura todos los efectos del navegador.
- Use clases e ID para dar efectos a los elementos HTML.
Style.css
.main_box{
filter: drop-shadow(1.25em .75em 0px rgb(150, 223, 150));
}
.img{
border-radius: 1em;
width: 15em;
height: 15em;
clip-path: polygon(75% 0%, 100% 50%,75% 100%,0% 100%,0% 0%);
background-color: green;
}
Código completo: aquí combinaremos las dos secciones anteriores en una sola.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.main_box{
filter: drop-shadow(1.25em .75em 0px rgb(150, 223, 150));
}
.img{
border-radius: 1em;
width: 15em;
height: 15em;
clip-path: polygon(75% 0%, 100% 50%,75% 100%,0% 100%,0% 0%);
background-color: green;
}
</style>
</head>
<body>
<div class="main_box">
<div class="img"></div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rahulmahajann y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA