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>
media queries de CSS
puedes solucionarloresize
dejavascript
es muy potente