0

he creado un div con forma triangular y fondo transparente y quiero hacerlo responsive, me refiero a que le he dado una posición absoluta y cuando disminuyo el tamaño de la pantalla se desplaza hacia abajo. He visto una manera de hacerlo que es crear estilo dentro del div a través de JS, pero no sé cómo hacerlo. La muestra de refenecia es esta página web https://joincoup.com/es/madrid. Es el div con id #mask inferior de la cabecera.

¿Alguien me puede ayudar? Gracias de antemano

#hero {

	position: relative;
}

 #mask {

 	width: 0;
 	height: 0;
 	border-top: 230px solid transparent;
 	border-bottom: 230px solid transparent;
 	border-right: 1920px solid white;
 	position: absolute;
 	top: 10px;
 	z-index: 25;
 	pointer-events: none;

 }


#cabecera {

	background-color: red;
	height: 130vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 50px;
	letter-spacing: 3px;
	z-index: 1;
	
}



.text {
 
 	position: absolute; 
	  bottom: 40%;
	  left: 50%;
	  transform: translateX(-50%) translateY(-50%);
	  list-style: none;
	  border-bottom: 0;
	  font-family: 'Julius Sans One', sans-serif; 
}

.linea-lateral::before {

	left: 0;

}

.linea-lateral::before, .linea-lateral::after {

	border-bottom: 0.1em solid white;
	content: "";
	display: inline-block;
	position: absolute;
	top: 50%;
	width: 2em;

}


.linea-lateral::after {

	right: 0;
}



 .box p {

 	font-family: 'Julius Sans One', sans-serif;
 	text-transform: uppercase;
 	color: white;
 	font-size: 2em;
 	font-weight: 400;
 	position: relative;
 	text-align: center;
 
 }
<section id="hero">

        <div id="cabecera">

                <div class="box">

                          <h1>paula domingo</h1>


             


                </div>
                
        </div>
          
        <div id="mask"></div>

      </section>

7
  • Con media queries de CSS puedes solucionarlo Commented el 20 feb. 2019 a las 18:56
  • Hola, gracias por tu respuesta, pero creo que tendría que reflejar infinitos media queries. Creo que se trata de una fórmula que detecte el ancho de la ventana, mediante $(window).width() y aplicar la fórmula para que introduzca un style al div y la progresión por cada pixel que disminuya el tamaño, pixel que decrece el tamaño del triángulo y la posición.
    – Paula
    Commented el 20 feb. 2019 a las 19:28
  • tambien puede ser, la función resize de javascript es muy potente Commented el 20 feb. 2019 a las 19:44
  • OK, lo voy a mirar.
    – Paula
    Commented el 20 feb. 2019 a las 19:46
  • Hola, puedes colocar una url valida de tu background ya que al ejecutarlo se ve en blanco y no se puede trabajar en una respuesta precisa
    – frank_ivan
    Commented el 20 feb. 2019 a las 19:57

1 respuesta 1

0

Podrías utilizar media queries, te dejo las de los diferentes tipos de dispositivos, SOLO CREA 3 CLASES (.web-styles, .tablet-styles, .mobile-styles) Y YA NO HACES INFINITOS MEDIA QUERIES:

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .example {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .example {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .example {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .example {background: orange;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .example {background: pink;}
}

Creo que si lo vemos desde la parte practica y teórica, seria mas sano hacerlo mediante CSS que con JS.

Saludos.

5
  • Me queda la duda: ¿Cómo aplicarías tu respuesta para solucionar la pregunta del OP? Commented el 20 feb. 2019 a las 19:46
  • Crear 3 clases (.web-styles, .tablet-styles, .mobile-styles), metes tus estilos dentro del media query y a los tags HTML les agregas su CLASS. Commented el 20 feb. 2019 a las 19:49
  • 1
    En referencia a la repuesta de Ricardo, tan sólo con probarlo en el Samsung S5 y el S9 ya se me va...media queries para posiciones absolutas en la vertical creo que no es la respuesta. Me refiero cuando hay que hilar muy fino--> cuestión de un pixel.
    – Paula
    Commented el 20 feb. 2019 a las 19:50
  • Bueno, nos ilustras cuando lo soluciones vale? :) Saludos! Commented el 20 feb. 2019 a las 19:51
  • Sí a ver si doy con ello.
    – Paula
    Commented el 20 feb. 2019 a las 19:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.