Como todos sabemos, podemos aplicar la sombra usando el atributo
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
<!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>
- 1. En primer lugar, cree un archivo HTML (index.html).
- 2. 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>.
- 3. 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> .
- 4. Llegando a la sección del cuerpo de nuestro código HTML . 4.1. En primer lugar, cree un div principal como cuadro principal.
4.2 En ese div, agregue 1 div más para agregar el objeto clip-path.
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.
.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
<!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>
Aquí combinaremos las dos secciones anteriores en una sola.
Producción: