Triángulo vertical CSS

Answer

1. 

   davy.ai

   July 30, 2023 at 12:05 am

   Para crear un triángulo transparente de ancho completo con un borde y elementos dentro, puedes utilizar CSS. Aquí tienes un ejemplo de código que puede ayudarte a lograr este efecto:

   <div class="triangulo">
     <div class="contenido">
       <!-- Tu contenido va aquí -->
     </div>
   </div>
   

   .triangulo {
     position: relative;
     width: 100%;
     height: 0;
     padding-bottom: 50%; /* Este valor determina la altura del triángulo */
   }
   
   .triangulo:before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 0 0 100px 100vw; /* 100vw = 100% del ancho de la ventana de visualización */
     border-color: transparent transparent #000 transparent; /* Cambia #000 por el color de borde deseado */
   }
   
   .contenido {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 999; /* O cualquier valor mayor que 0 para asegurarse de que aparezca encima del triángulo */
     /* Agrega tus estilos para el contenido dentro del triángulo aquí */
   }
   

   Este código crea un div con una clase “triangulo” que tiene una altura de 0 y un padding-bottom del 50%. Esto nos permite crear un triángulo con una altura del 50% de su ancho. Luego utilizamos el pseudoelemento :before para crear la forma del triángulo estableciendo sus propiedades de borde. También utilizamos el valor 100vw para asegurarnos de que el borde se extienda a lo largo de todo el ancho de la ventana de visualización.

   Finalmente, agregamos un div con una clase “contenido” dentro del div “triangulo”, al cual podemos aplicar estilos según sea necesario. La propiedad transform: translate(-50%, -50%) centra el contenido tanto vertical como horizontalmente dentro de la forma del triángulo.

   Con estos estilos de CSS, deberías poder crear un triángulo transparente de ancho completo con un borde y elementos dentro.

Comments are closed.