2

Quería saber cómo hacen los maquetadores para darle forma a un div como el del Sgte ejemplo

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

No son completamente cuadrados sino que tienen forma en diagonal, como se hace este diseño? Cómo se le da esta forma a un div ? Gracias

Me refiero a la parte inclinada de la primera imagen y a la parte ovalada de la segunda como se le da esta forma a los div, sé que hay veces que se hace con imágenes pero creo que con CSS es posible inclinar o darle una forma diferente a los divs

9
  • Yo los veo cuadrados.. no esta claro a que te referis.. Commented el 5 feb. 2019 a las 13:20
  • 1
    seguramente sean imagenes o gradientes. En cualquier caso esta pregunta no cumple los requisitos del sitio para ser una buena pregunta, te recomiendo leer el recorrido de bienvenida y Cómo preguntar
    – user7176
    Commented el 5 feb. 2019 a las 13:24
  • Yo lo que veo son divs normales, con height, border y filtro de opacity Commented el 5 feb. 2019 a las 13:28
  • He cambiado las imágenes para q sea más claro, me refiero a los bordes inferiores de los divs de las imágenes uno es ovalado y el otro está inclinafo.. es posible con CSS hacer eso?
    – juan perez
    Commented el 5 feb. 2019 a las 13:47
  • 1
    podes usar un svg como fondo y jugar con el preserveAspectRatio Commented el 5 feb. 2019 a las 14:22

1 respuesta 1

2

Svg como imagen de fondo pintando un blanco sobre el gradiente, alineado al borde inferior y con background-size: contain para que se acomode.

#footer {
  background: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 1900 230%22%3E%0A  %3Cpath fill%3D%22%23FFF%22 d%3D%22M1900 208.43c-209.35-14.29-314.55-89.93-509.35-89.93-104.5 0-313.16 81.67-455.85 78.24-162.33-3.9-351.81-78.24-458.44-78.24C322 118.5 254.11 160.43 157 179 63.19 196.94 0 211.03 0 211.03V230h1900v-21.57z%22%2F%3E%0A%3C%2Fsvg%3E'), linear-gradient(to left, #037FD5, #03c5d5);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  min-height: 340px;
  color: #fff;
}

body {
  background: #fe0;
}
<body>
  <div id="footer">
    <h1>Curabitur sit amet dolor varius</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum porttitor ullamcorper. Ut consequat, ante nec vestibulum suscipit, velit sapien lobortis sem, sed molestie nulla metus ac ante. Proin libero orci, porta et eros ac, ullamcorper
      aliquam urna. Nam suscipit neque ut ex laoreet aliquam. </p>
  </div>
</body>


El svg sin urlencodear:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1900 230">
  <path fill="#FFF" d="M1900 208.43c-209.35-14.29-314.55-89.93-509.35-89.93-104.5 0-313.16 81.67-455.85 78.24-162.33-3.9-351.81-78.24-458.44-78.24C322 118.5 254.11 160.43 157 179 63.19 196.94 0 211.03 0 211.03V230h1900v-21.57z"/>
</svg>

Otra opción con svg inline: el gradiente está aplicado en el svg, preserveAspectRatio hace que se estire o se centre o cropee.

La ventaja es que el svg está en el DOM y lo podes modificar con javascript o más css.

body {
  background: #fe0;
}

#footer {
  min-height: 340px;
  background: transparent;
  position: relative;
  z-index: 10;
  color: #fff;
}

#footer>svg {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
}
<body>
  <div id="footer">
    <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1900 230">
  <linearGradient id="grad" x2="1889.01" y1="105.51" y2="105.51" gradientUnits="userSpaceOnUse">
    <stop offset="0" stop-color="#037fd5"/>
    <stop offset="1" stop-color="#71c8f1"/>
  </linearGradient>
  <path fill="url(#grad)" d="M1900 208.43c-209.35-14.29-314.55-89.93-509.35-89.93-104.5 0-313.16 81.67-455.85 78.24-162.33-3.9-351.81-78.24-458.44-78.24C322 118.5 254.11 160.43 157 179 63.19 196.94 0 211.03 0 211.03V0h1900v208.43z"/>
</svg>

    <h1>Curabitur sit amet dolor varius</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum porttitor ullamcorper. Ut consequat, ante nec vestibulum suscipit, velit sapien lobortis sem, sed molestie nulla metus ac ante. Proin libero orci, porta et eros ac, ullamcorper
      aliquam urna. Nam suscipit neque ut ex laoreet aliquam. </p>
  </div>
</body>

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