significado - Forma de curva sigmoidea con CSS

sigmoideo significado

Question

Me gustaría crear una forma de curva sigmoidea para un diseño de pantalla completa que revele el fondo con motivos decorativos en un lado y el fondo de color sólido en el otro lado, para que el texto se coloque encima.

El objetivo es tener una página de pantalla completa con un lado superior izquierdo similar a sigmoide lleno de patrón, y el resto de la página solo para tener fondo blanco.

JSFiddle: curva sigmoidea inacabada

#container {
  padding-top: 10%;
  padding-bottom: 10%;
  background: white url(http://famok.com/wp-content/uploads/2016/10/WhiteOnWhite.jpg) top left / 26px 32px repeat;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#parallelogram {
  margin-left: 35%;
  width: 100%;
  height: 900px;
  -webkit-transform: skew(-15deg);
  -moz-transform: skew(-15deg);
  -o-transform: skew(-15deg);
  transform: skew(-15deg);
  background: white;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  -moz-box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
  -webkit-box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
  box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
}

<div id="container">
  <div id="parallelogram">
  </div>
</div>

No puedo imaginar cómo crear (o simular) una esquina redondeada invertida cerca de la esquina inferior izquierda.

¿O tal vez hay una solución conceptualmente diferente (mejor) disponible?

Actualización: descubrí cómo crear la forma que necesito completamente con CSS.

#container {
  padding-top: 100px;
  background: red;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#parallelogram {
  margin-left: 400px;
  width: 100%;
  height: 900px;
  -webkit-transform: skew(-15deg);
  -moz-transform: skew(-15deg);
  -o-transform: skew(-15deg);
  transform: skew(-15deg);
  background: white;
  -moz-border-top-left-radius: 100px;
  -webkit-top-left-border-radius: 100px;
  border-top-left-radius: 100px;
}
#bottom {
  height: 200px;
  width: 100%;
  background: white;
}
#bottom-corner {
  height: 100px;
  width: 300px;
  margin-left: -34px;
  background: red;
  -moz-border-bottom-right-radius: 100px;
  -webkit-bottom-right-border-radius: 100px;
  border-bottom-right-radius: 100px;
  -webkit-transform: skew(-15deg);
  -moz-transform: skew(-15deg);
  -o-transform: skew(-15deg);
  transform: skew(-15deg);
}

<div id="container">
  <div id="parallelogram">
  </div>

  <div id="bottom">
    <div id="bottom-corner">
    </div>
  </div>
</div>

Sin embargo, esta no es la solución final porque la forma no me permite utilizar el tipo de efectos de fondo que tengo en mente. Esto es lo que sucede cuando intento: violín .

#container {
  padding-top: 100px;
  background: white url(http://famok.com/wp-content/uploads/2016/10/WhiteOnWhite.jpg) bottom left / 26px 32px repeat;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#parallelogram {
  margin-left: 400px;
  width: 100%;
  height: 900px;
  -webkit-transform: skew(-15deg);
  -moz-transform: skew(-15deg);
  -o-transform: skew(-15deg);
  transform: skew(-15deg);
  background: white;
  -moz-border-top-left-radius: 100px;
  -webkit-top-left-border-radius: 100px;
  border-top-left-radius: 100px;
  -moz-box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
  -webkit-box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
  box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
}
#bottom {
  height: 200px;
  width: 100%;
  background: white;
  -moz-box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
  -webkit-box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
  box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
}
#bottom-corner {
  height: 100px;
  width: 300px;
  margin-left: -34px;
  background: white url(http://famok.com/wp-content/uploads/2016/10/WhiteOnWhite.jpg) top left / 26px 32px repeat;
  -moz-border-bottom-right-radius: 100px;
  -webkit-bottom-right-border-radius: 100px;
  border-bottom-right-radius: 100px;
  -webkit-transform: skew(-15deg);
  -moz-transform: skew(-15deg);
  -o-transform: skew(-15deg);
  transform: skew(-15deg);
  -moz-box-shadow: 0 0 15px rgba(0, 0, 0, .4);
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .4);
  box-shadow: 0 0 15px rgba(0, 0, 0, .4);
}

<div id="container">
  <div id="parallelogram">
  </div>

  <div id="bottom">
    <div id="bottom-corner">
    </div>
  </div>
</div>

Actualización posterior: después de un poco de prueba y error terminé con una solución de corte ridículamente cruda que logra el resultado visual que necesitaba:

#container {
  padding-top: 100px;
  background: white url(http://famok.com/wp-content/uploads/2016/10/WhiteOnWhite.jpg) top left / 26px 32px repeat;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#parallelogram {
  margin-left: 385px;
  width: 100%;
  height: 900px;
  -webkit-transform: skew(-15deg);
  -moz-transform: skew(-15deg);
  -o-transform: skew(-15deg);
  transform: skew(-15deg);
  background: white;
  -moz-border-top-left-radius: 100px;
  -webkit-top-left-border-radius: 100px;
  border-top-left-radius: 100px;
  -moz-box-shadow: inset 0 15px rgba(0, 0, 0, .4);
  -webkit-box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
  box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
}
#bottom-rounded-corner {
  height: 122px;
  position: relative;
  width: 200%;
  z-index: 1000;
  margin-top: -80px;
  margin-left: -185px;
  background: url(http://famok.com/wp-content/uploads/2016/11/CornerAndMask.png) top left no-repeat;
}
#bottom-white {
  height: 100px;
  width: 100%;
  background: white;
}

<div id="container">
  <div id="parallelogram">
  </div>
  <div id="bottom-rounded-corner">

  </div>
  <div id="bottom-white">
  </div>
</div>

Intente lo más que pueda para implementar una alternativa conceptualmente mejor sugerida por Harry a continuación, no pude usarla para crear el efecto que quería. Todavía estaría agradecido si alguien pudiera ayudar, ya sea mostrando cómo hacerlo o proponiendo optimizaciones para mi solución.

¡Gracias de antemano!

Answer 1

Use SVG para formas complejas y no CSS:

Como mencioné en mis comentarios, no use CSS para crear formas tan complejas. SVG es la herramienta recomendada para cosas tan complejas. Los SVG son fáciles de crear, mantener y también responden (escalables) de manera predeterminada, por lo que tienen muchas ventajas.

Creando la forma sigmoidea:

Crear la forma de curva sigmoidea con SVG en sí es bastante simple y solo necesita un elemento de ruta:

• M0,750 mueve la pluma imaginaria cerca de la parte inferior izquierda del elemento SVG (las coordenadas se establecen un poco más bajas que la altura del SVG para que haya un espacio en la parte inferior donde la sombra será visible).
• L250,750 produce una L ine horizontal desde el punto (0,768) hasta (250,768)
• C650,730 500,154 1024,154 crea la curva real. Aquí las dos primeras coordenadas son puntos de control de la curva ((650,730), (500,154)) y el tercero es el punto final (1024,154). La curvatura de la curva se puede ajustar modificando los puntos de control.
• L1024,0 0,0 0,750 es para completar la forma. La forma debe completarse para que el relleno funcione.

body {
  margin: 0;
}
svg {
  width: 100%;
  height: 100vh;
}

<svg viewBox=''0 0 1024 768'' preserveAspectRatio=''none''>

  <!-- For the shadow -->
  <defs>
    <filter id="dropShadow">
      <feGaussianBlur in="SourceAlpha" stdDeviation="6" />
      <feOffset dx="3" dy="3" result="offsetBlur" />
      <feFlood flood-color="#AAA" flood-opacity="1" result="offsetColor" />
      <feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur" />
      <feMerge>
        <feMergeNode />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <!-- End of shadow -->

  <!-- For filling the top-left with pattern -->
  <pattern id=''dots'' patternUnits=''userSpaceOnUse'' width=''25'' height=''25''>
    <polygon points=''0,0 0,25 25,25 25,0'' fill=''yellowgreen'' />
    <circle cx=''12.5'' cy=''12.5'' r=''4'' fill=''rebeccapurple'' />
  </pattern>
  <!-- End of pattern -->

  <!-- Actual sigmoid curve -->
  <path d=''M0,750 L250,750 C650,730 500,154 1024,154 L1024,0 0,0 0,750'' fill=''url(#dots)'' filter=''url(#dropShadow)'' />

</svg>

Aplicación de patrón a la forma:

En la demostración anterior, creé un patrón de lunares utilizando los elementos de polygon y circle , pero no es obligatorio crearlo dentro de SVG, también podemos usar elementos de image y rellenar la forma con el patrón de imagen.

Si desea cambiar la imagen de fondo (patrón) en otra imagen de su elección, simplemente especifique la URL de su imagen en el atributo xlink:href de la etiqueta de la image como en el siguiente fragmento. Según sus necesidades e imagen, es posible que tenga que cambiar la height y el width del pattern y la image .

<pattern id=''dots'' patternUnits=''userSpaceOnUse'' width=''25'' height=''25''>
  <image xlink:href=''https://yourwebsite.com/yourpath'' x=''0'' y=''0'' width=''15'' height=''15'' />
</pattern>

body {
  margin: 0;
}
svg {
  width: 100%;
  height: 100vh;
}

<svg viewBox=''0 0 1024 768'' preserveAspectRatio=''none''>
  <defs>
    <filter id="dropShadow">
      <feGaussianBlur in="SourceAlpha" stdDeviation="6" />
      <feOffset dx="3" dy="3" result="offsetBlur" />
      <feFlood flood-color="#AAA" flood-opacity="1" result="offsetColor" />
      <feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur" />
      <feMerge>
        <feMergeNode />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
    <pattern id=''dots'' patternUnits=''userSpaceOnUse'' width=''36.6'' height=''46''>
      <image xlink:href=''http://famok.com/wp-content/uploads/2016/10/WhiteOnWhite.jpg'' x=''0'' y=''0'' width=''36.6'' height=''46'' />
    </pattern>
  </defs>
  <path d=''M0,750 L250,750 C650,730 500,154 1024,154 L1024,0 0,0 0,750'' fill=''url(#dots)'' filter=''url(#dropShadow)'' />
</svg>

^{Nota: La imagen utilizada en la demostración anterior no es mía. Fue tomado de internet.}

La sombra:

El efecto de sombra se crea utilizando el elemento de filter SVG junto con los elementos feGaussianBlur , feOffset y feMerge . El elemento feGaussianBlur difumina el gráfico fuente (nuestro sigmoide) por el valor de desviación estándar especificado y feOffset desplaza la imagen resultante por los valores dx , dy . La imagen original y la borrosa son fusionadas usando feMerge . El feFlood y el feComposite se agregan solo en caso de que quiera darle a la sombra un color diferente. Los colores se pueden especificar utilizando los atributos de flood-color flood-opacity . (El método para cambiar el color de la sombra paralela SVG fue tomado de esta respuesta por Joe W.)

Agregar texto:

Ahora bien, esta es la parte más difícil de todo. Si necesita colocar el texto solo en el área de color sólido de la página, deberá usar los atributos de posicionamiento con cuidado. Si el texto es pequeño o solo una línea de texto, podríamos usar el elemento de text SVG como en la demostración que he vinculado anteriormente. Si no es así, debes asegurarte de que la caja contenedora del texto no se superponga al área de la forma sigmoidea.

body {
  margin: 0;
}
div.container {
  position: relative;
  width: 100%;
  height: 100vh;
}
svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
.container div {
  position: absolute;
  top: 50%;
  right: 0px;
  height: 30vh;
  width: 33.33%;
  font-size: 20px;
}

<div class=''container''>
  <svg viewBox=''0 0 1024 768'' preserveAspectRatio=''none''>

    <defs>
      <!-- For the shadow -->
      <filter id="dropShadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="6" />
        <feOffset dx="3" dy="3" result="offsetBlur" />
        <feFlood flood-color="#AAA" flood-opacity="1" result="offsetColor" />
        <feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur" />
        <feMerge>
          <feMergeNode />
          <feMergeNode in="SourceGraphic" />
        </feMerge>
      </filter>
      <!-- End of shadow -->

      <!-- For filling the top-left with pattern -->
      <pattern id=''dots'' patternUnits=''userSpaceOnUse'' width=''25'' height=''25''>
        <polygon points=''0,0 0,25 25,25 25,0'' fill=''yellowgreen'' />
        <circle cx=''12.5'' cy=''12.5'' r=''4'' fill=''rebeccapurple'' />
      </pattern>
      <!-- End of pattern -->
    </defs>

    <!-- Actual sigmoid curve -->
    <path d=''M0,750 L250,750 C650,730 500,154 1024,154 L1024,0 0,0 0,750'' fill=''url(#dots)'' filter=''url(#dropShadow)'' />

  </svg>
  <div>Hello! Here is some text that is placed on the solid colored area of the page.</div>
</div>

Podemos intentar usar la propiedad CSS shape-outside , pero el soporte del navegador para eso es bastante pobre en este momento. Aquí hay una demostración que usa esta propiedad shape-outside . No se pudo alojar en el sitio porque era necesario crear un archivo SVG separado. La demostración es una versión adaptada de la proporcionada en las especificaciones de formas CSS de W3C .

Enfoque alternativo: (aplicar el patrón al contenedor en lugar de SVG)

Como no desea que la imagen quede aplastada o estirada, un enfoque alternativo sería hacer lo siguiente:

• Cree la forma de SVG de manera que solo sea la parte de color sólido (y no el área con dibujos)
• Aplica el patrón al div.container y coloca el SVG absolutamente en la parte superior del elemento. La forma SVG (que tiene un relleno de color blanco) evitará que el patrón sea visible en el otro lado.
• Cambia la sombra en el SVG de una sombra paralela normal a una sombra insertada. (El código de la Inserción de Shadow está completamente tomado de aquí .

body {
  margin: 0;
}
div.container {
  position: relative;
  background: white url(http://famok.com/wp-content/uploads/2016/10/WhiteOnWhite.jpg) top left / 26px 32px repeat;
  width: 100%;
  height: 100vh;
}
svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
.container div {
  position: absolute;
  top: 50%;
  right: 0px;
  height: 30vh;
  width: 33.33%;
  font-size: 20px;
}

<div class=''container''>
  <svg viewBox=''0 0 1024 768'' preserveAspectRatio=''none''>
    <defs>
      <filter id="dropShadow" x="-50%" y="-50%" width="200%" height="200%">
        <feComponentTransfer in=SourceAlpha>
          <feFuncA type="table" tableValues="1 0" />
        </feComponentTransfer>
        <feGaussianBlur stdDeviation="6" />
        <feOffset dx="2" dy="2" result="offsetblur" />
        <feFlood flood-color="#AAA" result="color" />
        <feComposite in2="offsetblur" operator="in" />
        <feComposite in2="SourceAlpha" operator="in" />
        <feMerge>
          <feMergeNode in="SourceGraphic" />
          <feMergeNode />
        </feMerge>
      </filter>
    </defs>
    <path d=''M0,750 L250,750 C650,730 500,154 1024,154 L1024,768 0,768 0,750'' fill=''white'' filter=''url(#dropShadow)'' />
  </svg>
  <div>Hello! Here is some text that is placed on the solid colored area of the page.</div>
</div>

Aquí está Plunker Demo para el enfoque alternativo. Esto es un poco más complejo que el anterior porque aquí necesitamos un SVG para producir el área de color sólido (utilizado como img ) y otro SVG que es el inverso (el área con dibujos) para ser utilizado con shape-outside .