223

¿Cómo creo una forma como esta para mostrar en una página web?

No quiero usar imágenes, ya que se volverían borrosas al escalar

Forma de lágrima que necesito hacer con HTML, CSS o SVG

Intenté con CSS :

.tear {
  display: inline-block;
  transform: rotate(-30deg);
  border: 5px solid green;
  width: 50px;
  height: 100px;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

<div class="tear">
</div>

Expandir fragmento

Eso resultó realmente jodido.

Y luego probé con SVG:

<svg viewBox="0 100 100">
  <polygon points="50,0 100,70 50,100 0,70"/>
</svg>

Expandir fragmento

Obtuvo la forma, pero la parte inferior no era curva.

¿Hay alguna forma de crear esta forma para que pueda usarse en una página HTML?

— Persijn
fuente

12

"No quiero usar imágenes ya que se volverían borrosas al escalar", ¿por qué escalas la imagen? No se vuelven borrosas si usas [srcset]o el <picture>elemento. Mejor aún, solo enlace a una imagen svg:<img src="tear.svg" alt="Teardrop"/>

— zzzzBov

32

@zzzzBov: ¿Realmente estás recomendando el pictureelemento? Sin soporte para IE, sin soporte para versiones anteriores de Chrome, sin soporte para safari. ¿Debo continuar?

— jbutler483

99

@zzzzBov. why are you scaling the image?Bueno, la imagen puede aparecer borrosa sin que el desarrollador la escale. Todo lo que necesita para eso es un zoom del navegador. En mi caso, tengo una pantalla HighDPI y muchas imágenes borrosas. Entonces, sí, si puedes evitar imágenes usando SVG, hazlo.

— Nolonar

63

Unicode lo resuelve todo ... U + 1F4A7 💧

— Thomas Weller

21

@Thomas veo un cuadrado: / i.stack.imgur.com/8fXMf.png

— user000001

327

Enfoque SVG:

Puede lograr la doble curva fácilmente con un SVG en línea y el <path/>elemento en lugar del <polygon/>elemento que no permite formas curvas.

El siguiente ejemplo usa el <path/>elemento con:

2 comandos de curva bezier cuadrática para las 2 curvas superiores (líneas que comienzan con Q)
1 comando de arco para el fondo grande (línea que comienza con A)

<svg width="30%" viewbox="0 0 30 42">
  <path fill="transparent" stroke="#000" stroke-width="1.5"
        d="M15 3
           Q16.5 6.8 25 18
           A12.8 12.8 0 1 1 5 18
           Q13.5 6.8 15 3z" />
</svg>

Expandir fragmento

SVG es una gran herramienta para hacer este tipo de formas con curvas dobles. Puede consultar esta publicación sobre curvas dobles con una comparación SVG / CSS. Algunas de las ventajas de usar SVG en este caso son:

Control de curvas
Control de relleno (opacidad, color)
Control de trazo (ancho, opacidad, color)
Cantidad de código
Hora de construir y mantener la forma
Escalable
Sin solicitud HTTP (si se usa en línea como en el ejemplo)

La compatibilidad del navegador para SVG en línea se remonta a Internet Explorer 9. Consulte canIuse para obtener más información.

— web-tiki
fuente

puede reducirse a: <svg width="100%" height="100%" viewBox="0 0 8 8" /> <path d="M4 1L3 4A1.2 2 0 1 0 5 4"/> </svg> ... esto llenará el área que le da, por lo que puede hacer gotas de lluvia "gruesas" o "delgadas" ... cambie a altura / ancho fijo si es necesario

— technosaurus

1

@technosaurus, el problema con la reducción del número de comandos en el d="..."atributo es que ya no tiene la doble curva en la parte superior de la caída.

— web-tiki

10

+1 porque deberías usar SVG para esto, no CSS. Las características de CSS que necesitaría para lograrlo tienen aproximadamente el mismo soporte de navegador que SVG, por lo que no hay ventaja para CSS en ese puntaje. CSS puede hacer formas, pero para eso no está diseñado; no intentes clavar un clavo con un destornillador solo por el hecho de ser inteligente cuando puedes hacerlo igual de bien con una herramienta diseñada para el trabajo.

— Simba

66

Aún mejor: cree un archivo SVG y úselo <img />en el documento de hipertexto.

— Andreas Rejbrand

@AndreasRejbrand puede ser una buena idea dependiendo del proyecto, pero agrega una solicitud HTTP que OP parece querer evitar.

— web-tiki

136

Radio de borde básico

Puede hacer esto dentro de CSS con relativa facilidad usando border-radius 'y transforma. Tu CSS estaba solo un poco fuera.

.tear {
  width: 50px;
  height: 50px;
  border-radius: 0 50% 50% 50%;
  border: 3px solid black;
  transform: rotate(45deg);
  margin-top: 20px;
}

<div class="tear"></div>

Expandir fragmento

Radio de borde avanzado

Esto será muy similar al anterior pero le da un poco más de forma.

.tear {
  width: 50px;
  height: 50px;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  border: 3px solid black;
  transform: rotate(-45deg);
  margin-top: 20px;
}

<div class="tear"></div>

Expandir fragmento

— Stewartside
fuente

44

@zzzzBov No entiendo completamente cómo es la herramienta incorrecta, OP solicitó una solución CSS o SVG y se me ocurrió una solución CSS que se ajusta a la descripción lo más cerca posible. Es ligero y fácil de modificar.

— Stewartside

12

@zzzzBov El uso de CSS para imágenes y sprites es de uso común. Es un código muy mínimo para generar una "Imagen" genérica. Creo que es apropiado porque es utilizable dentro de las especificaciones de preguntas de ser utilizable en una página web.

— Stewartside

13

@zzzzBov: CSS está perfectamente bien para las formas. ¿Quién puede decir para qué se usa esa forma? semánticamente una imagen : OP ha declarado claramente que no desea utilizar una imagen, de lo contrario, ¿por qué otra razón se haría una pregunta de este tipo?

— jbutler483

46

@ jbutler483, "CSS está perfectamente bien para las formas" no, es horrible. Solo porque puedas no significa que debas . Introduce todo tipo de basura en el marcado, y es un tedioso desastre para mantener. Las imágenes son mucho más simples de mantener, ya que se separan fácilmente en su propio archivo autónomo individual.

— zzzzBov

19

'Basura en el marcado' ocurre cuando usas bootstrap o iconos de fuentes increíbles. En serio, creo que vas un poco exagerado para cosas como esta cuando (obviamente) esto se puede lograr usando una declaración de radio de borde. Pero heno, ¿quién puede decirte que no uses imágenes?

— jbutler483

88

Su principal problema con su código CSS fue:

Usaste una altura diferente al ancho
No ha girado el ángulo correcto

Entonces, al 'solucionar' estos problemas, generaría:

.tear {
  display: inline-block;
  transform: rotate(-45deg);
  border: 5px solid green;
  width: 100px;
  height: 100px;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
/***for demo only***/

.tear {
  margin: 50px;
}

<div class="tear">
</div>

Expandir fragmento

Tenga en cuenta también que para ahorrar en la longitud de CSS, puede volver a escribir sus propiedades de radio de borde en:

border-radius: 50% 0 50% 50%;

esto podría mejorarse con pseudo elementos como se muestra en este violín

Alternativas

Encontré esto por Vinay Challuru en codepen.

Tenga en cuenta que con la lógica aquí, pude crear el SVG para casi cualquier forma de construcción posible, etc. Por ejemplo, una salida rápida fue:

Mostrar fragmento de código

<svg viewBox='0 0 400 400'>
  <path fill="none" stroke="#333" stroke-width="5" d="M200,40 C200,115 280,180 280,240 A80,80,0 0,1,120,240 C120,180 200,115 200,40" stroke-linejoin='miter'></path>
</svg>

Expandir fragmento

Está utilizando un SVG y le permite alterar la forma de múltiples maneras, teniendo la capacidad de alterar su forma para obtener el resultado deseado:

Mostrar fragmento de código

var SVG = function() {
  this.element = document.getElementsByTagName("svg")[0];
  this.namespace = "http://www.w3.org/2000/svg";
  this.width = 400;
  this.height = 400;
}

/****Let's initialise our SVG ready to draw our shape****/
var svg = new SVG();

/****This sets up the user interface - we've included the script for this as an external library for the codepen****/
var gui = new dat.GUI();

/****Here's where the code to create the shape begins!****/
var Teardrop = function() {
  this.x = svg.width * 0.5;
  this.y = svg.height * 0.1;
  this.width = svg.width * 0.4;
  this.triangleHeight = svg.height * 0.5;
  this.yCP1 = svg.height * 0.2;
  this.yCP2 = svg.height * 0.45;
  this.element = null;
  this.ctrlPoints = [];
  this.anchors = [];
  this.fill = "none";
  this.stroke = "#333";
  this.strokeWidth = 2;
  this.showCtrlPoints = true;
  this.init();
}

Teardrop.prototype.init = function() {
  this.element = document.createElementNS(svg.namespace, "path");
  svg.element.appendChild(this.element);
  this.element.setAttribute("fill", this.fill);
  this.element.setAttribute("stroke", this.stroke);
  this.element.setAttribute("stroke-width", this.strokeWidth);

  for (var i = 0; i < 3; i++) {
    this.ctrlPoints.push(document.createElementNS(svg.namespace, "circle"));
    svg.element.appendChild(this.ctrlPoints[i]);

    this.ctrlPoints[i].setAttribute("fill", this.fill);
    this.ctrlPoints[i].setAttribute("stroke", 'red');
    this.ctrlPoints[i].setAttribute("stroke-width", 1);


    this.anchors.push(document.createElementNS(svg.namespace, "line"));
    svg.element.appendChild(this.anchors[i]);

    this.anchors[i].setAttribute("stroke-width", 1);
    this.anchors[i].setAttribute("stroke", this.stroke);
    this.anchors[i].setAttribute("stroke-dasharray", "3,2");
  }

  this.draw();
}

Teardrop.prototype.draw = function() {
  this.radius = this.width / 2;
  path = [
    "M", this.x, ",", this.y,
    "C", this.x, ",", this.yCP1, " ", this.x + this.width / 2, ",", this.yCP2, " ", this.x + this.width / 2, ",", this.y + this.triangleHeight,
    "A", this.radius, ",", this.radius, ",", "0 0,1,", this.x - this.width / 2, ",", this.y + this.triangleHeight,
    "C", this.x - this.width / 2, ",", this.yCP2, " ", this.x, ",", this.yCP1, " ", this.x, ",", this.y
  ];
  this.element.setAttribute("d", path.join(""));

  cpCoords = [];
  cpCoords[0] = [this.x, this.yCP1];
  cpCoords[1] = [this.x - this.width / 2, this.yCP2];
  cpCoords[2] = [this.x + this.width / 2, this.yCP2];

  anchorCoords = [];
  anchorCoords[0] = [this.x, this.y];
  anchorCoords[1] = [this.x - this.width / 2, this.y + this.triangleHeight];
  anchorCoords[2] = [this.x + this.width / 2, this.y + this.triangleHeight];

  for (var i = 0; i < 3; i++) {
    this.ctrlPoints[i].setAttribute("cx", cpCoords[i][0]);
    this.ctrlPoints[i].setAttribute("cy", cpCoords[i][1]);

    this.anchors[i].setAttribute("x1", cpCoords[i][0]);
    this.anchors[i].setAttribute("x2", anchorCoords[i][0]);
    this.anchors[i].setAttribute("y1", cpCoords[i][1]);
    this.anchors[i].setAttribute("y2", anchorCoords[i][1]);

    if (this.showCtrlPoints) {
      this.ctrlPoints[i].setAttribute("r", 2);
      this.anchors[i].setAttribute("stroke-width", 1);
    } else {
      this.ctrlPoints[i].setAttribute("r", 0);
      this.anchors[i].setAttribute("stroke-width", 0);
    }
  }
}

var teardrop = new Teardrop();

gui.add(teardrop, 'triangleHeight', 0, svg.height * 0.75);
gui.add(teardrop, 'width', 0, 200);
gui.add(teardrop, 'yCP1', 0, svg.height);
gui.add(teardrop, 'yCP2', 0, svg.height);
gui.add(teardrop, 'showCtrlPoints', 0, svg.height);

for (var i in gui.__controllers) {
  gui.__controllers[i].onChange(function() {
    teardrop.draw();
  });
}

html,
body {
  height: 100%;
}
svg {
  display: block;
  margin: 0 auto;
  background: url('http://unitedshapes.com/images/graph-paper/graph-paper.png');
}

<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<svg width='400px' height='400px'></svg>

Expandir fragmento

Descargo de responsabilidad No escribí la pluma anterior, solo la obtuve.

Versión CSS

Aunque esto está lejos de estar completo, también puede generar esta forma usando CSS.

Mostrar fragmento de código

.tear{
    height:200px;
    width:200px;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 29%,rgba(0,0,0,1) 30%,rgba(0,0,0,1) 100%);
    border-radius:50%;
    margin:120px;
    position:relative;
}
.tear:before{
    content:"";
    position:absolute;
    top:-70%;left:0%;
    height:100%;width:50%;
    background: radial-gradient(ellipse at -50% -50%, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 100%);
}
.tear:after{
    content:"";
    position:absolute;
    top:-70%;left:50%;
    height:100%;width:50%;
    background: radial-gradient(ellipse at 150% -50%, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 100%);
}

<div class="tear"></div>

Expandir fragmento

Versión SVG

Debería saber que SVG debería estar en la parte superior de esta respuesta, sin embargo, me gusta un desafío y aquí hay un intento con SVG.

svg {
  height: 300px;
}
svg path {
  fill: tomato;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 100 100">

  <path d="M49.015,0.803
    c-0.133-1.071-1.896-1.071-2.029,0
    C42.57,36.344,20,43.666,20,68.367   
    C20,83.627,32.816,96,48,96
    s28-12.373,28-27.633
    C76,43.666,53.43,36.344,49.015,0.803z 
    M44.751,40.09   
    c-0.297,1.095-0.615,2.223-0.942,3.386
    c-2.007,7.123-4.281,15.195-4.281,24.537
    c0,5.055-2.988,6.854-5.784,6.854   
    c-3.189,0-5.782-2.616-5.782-5.831
    c0-11.034,5.315-18.243,10.005-24.604
    c1.469-1.991,2.855-3.873,3.983-5.749   
    c0.516-0.856,1.903-0.82,2.533,0.029
    C44.781,39.116,44.879,39.619,44.751,40.09z"/>


</svg>

Expandir fragmento

Al alterar los pathvalores, podrá alterar la forma de su diseño de lágrima.

— jbutler483
fuente

10

Todo esto parece muy ... detallado. La solución js es particularmente absurda.

— egid

44

@egid: Dije en mi respuesta que no creé la versión js. También tenga en cuenta que la versión js le permite alterar la forma en tiempo de ejecución

— jbutler483

55

En mi opinión, esta forma requiere curvas suaves para garantizar la continuidad de la curva.

La caída en cuestión:

Para la caída en cuestión,

no se pueden usar curvas suaves, ya que los puntos de control no serán de la misma longitud. Pero aún necesitamos hacer que los puntos de control estén exactamente opuestos (180 grados) a los puntos de control anteriores, para garantizar la continuidad completa de la curva. La imagen que se muestra a continuación ilustra este punto:

ingrese la descripción de la imagen aquí
Nota : Las curvas rojas y azules son dos curvas cuadráticas diferentes.

stroke-linejoin="miter", para la parte superior puntiaguda.
Como esta forma solo usa ccomandos sucesivos , podemos omitirla.

Aquí está el fragmento final:

<svg height="300px" width="300px" viewBox="0 0 12 16">
  <path fill="#FFF" stroke="black" stroke-width="0.5" stroke-linejoin="miter" 
        d="M 6 1 c -2 3 -5 5 -5 9
           0 7 10 7 10 0 
           0 -4 -3 -6 -5 -9z" />
</svg>

Expandir fragmento

TBH , sin embargo , las curvas de respuesta aceptadas no son bastante continuas.

Para IE 5-8 (VML)

Solo funciona en IE 5-8. VML usa comandos diferentes que SVG . P.ej. usa v para beziers cúbicos relativos .

Nota: este fragmento tampoco se ejecutará en IE 5-8. Debe crear un archivo html y ejecutarlo directamente en el navegador.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <style> v\:* { behavior: url(#default#VML); }

    </style >
</head>
<body>
    <div style="width:240; height:320;">
        <v:shape coordorigin="0 0" coordsize="12 16" fillcolor="white" strokecolor="black" strokewidth="1"
            strokeweight="5" style="width:240; height:320" 
            path="M 6 1 v -2 3 -5 5 -5 9
           0 7 10 7 10 0 
           0 -4 -3 -6 -5 -9 x e">
        </v:shape>
    </div>
</body>
</html>

— Max Payne
fuente

"no se pueden usar curvas suaves, ya que los puntos de control no serán de la misma longitud". ¿"Suavizar" no significa simplemente que las asas tangentes (puntos de control) se asientan en línea recta? ¿Por qué tienen que ser del mismo largo?

— Niccolo M.

2

@NiccoloM. En svg, la curva suave (comandos T y S) significa que el controlador es simétricamente opuesto, así como igual a la longitud del controlador anterior . En lenguaje normal, la curva suave puede significar diferentes longitudes de manejador, pero en svg, la longitud también es igual al manejo de curvas anterior :)

— Max Payne

42

O si la fuente de sus espectadores lo admite, use los caracteres Unicode

GOTA: 💧 ( `💧`)

o

GOTA NEGRA: 🌢 ( `🌢`)

Escala en consecuencia!

— Gnubie
fuente

Puede usar esto con @ font-face, pero luego tiene un archivo de fuente para mantener en el lugar correcto y tal.

— 1934286

3

SVG y un símbolo dedicado de Unicode como este es bueno. CSS para esto es malo. PNG está bien, pero no es perfecto ya que son gráficos de trama. JPG es extremadamente malo, tan malo que tendría pesadillas si lo viera.

— Andreas Rejbrand

@AndreasRejbrand un PNG de 20x20 escalaría peor que un JPG de 200x200. Y, con el mismo tamaño, un JPG sin comprimir es equivalente a un PNG. Ambos son rasterizados y sufren los mismos problemas.

— nico

@nico: En teoría, sí, puedes usar JPG con compresión cero. Pero Internet está lleno de desastres como este: en.wikipedia.org/wiki/Atomic_number#/media/…

— Andreas Rejbrand

28

Yo personalmente usaría un SVG para esto. Puede crear SVG en la mayoría de los software de gráficos vectoriales. Yo lo recomiendo:

Inkscape
Bosquejo
Ilustrador Adobe

He hecho uno a continuación que es un seguimiento de su forma en Illustrator.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="223.14px" height="319.008px" viewBox="0 0 223.14 319.008" enable-background="new 0 0 223.14 319.008" xml:space="preserve">
  <path fill="none" stroke="#000000" stroke-width="12" stroke-miterlimit="10" d="M111.57,13.291c0,0,57.179,86.984,72.719,108.819
    	c30.359,42.66,41.005,114.694,1.626,154.074c-20.464,20.463-47.533,30.293-74.344,29.488h-0.002
    	c-26.811,0.805-53.88-9.025-74.344-29.488C-2.154,236.804,8.492,164.77,38.851,122.11C54.391,100.275,111.57,13.291,111.57,13.291z" />
</svg>

Expandir fragmento

— Djave
fuente

27

Lienzo HTML

Esta es una opción descubierta en este hilo hasta ahora. Los comandos utilizados para los dibujos de Canvas son muy similares a SVG (y web-tiki merece los créditos por la idea base utilizada en esta respuesta).

La forma en cuestión se puede crear utilizando los comandos de curva propios del lienzo (Cuadrático o Bézier) o la API de ruta. La respuesta contiene ejemplos para los tres métodos.

El soporte del navegador para Canvas es bastante bueno .

Usando curvas cuadráticas

window.onload = function() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.lineJoin = 'miter';
    ctx.moveTo(120, 20);
    ctx.quadraticCurveTo(117.5, 30, 148, 68);
    ctx.arc(120, 88, 34.5, 5.75, 3.66, false);
    ctx.quadraticCurveTo(117.5, 35, 120, 20);
    ctx.closePath();
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 2;
    ctx.fillStyle = '#77CCEE'
    ctx.stroke();
    ctx.fill();
  }
}

canvas {
  margin: 50px;
  height: 100px;
  width: 200px;
  transform: scale(1.5);
}

body{
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<canvas id='canvas'></canvas>

Expandir fragmento

A continuación se muestra una versión avanzada con relleno degradado y sombras. También he incluido un hoverefecto en la forma para ilustrar un inconveniente de Canvas en comparación con SVG. El lienzo está basado en ráster (píxel) y, por lo tanto, se vería borroso / pixelado cuando se escala más allá de cierto punto. La única solución para eso sería volver a pintar la forma en cada cambio de tamaño del navegador, que es una sobrecarga.

Mostrar fragmento de código

window.onload = function() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var lineargradient = ctx.createRadialGradient(135, 95, 1, 135, 95, 10);
    lineargradient.addColorStop(0, 'white');
    lineargradient.addColorStop(1, '#77CCEE');      
    ctx.beginPath();
    ctx.lineJoin = 'miter';
    ctx.moveTo(120, 20);
    ctx.quadraticCurveTo(117.5, 30, 148, 68);
    ctx.arc(120, 88, 34.5, 5.75, 3.66, false);
    ctx.quadraticCurveTo(117.5, 35, 120, 20);
    ctx.closePath();
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 3;
    ctx.fillStyle = lineargradient;
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;
    ctx.shadowBlur = 2;
    ctx.shadowColor = "rgba(50, 50, 50, 0.5)";      
    ctx.stroke();
    ctx.fill();
  }
}

canvas {
  margin: 50px;
  height: 100px;
  width: 200px;
  transform: scale(1.5);
}


/* Just for demo */

body{
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

canvas{
  transition: all 1s;
}

canvas:hover{
  transform: scale(2);
}

<canvas id='canvas'></canvas>

Expandir fragmento

Usando curvas de Bezier

Mostrar fragmento de código

window.onload = function() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var lineargradient = ctx.createRadialGradient(135, 95, 1, 135, 95, 10);
    lineargradient.addColorStop(0, 'white');
    lineargradient.addColorStop(1, '#77CCEE');
    ctx.beginPath();
    ctx.lineJoin = 'miter';
    ctx.arc(120, 88, 35, 5.74, 3.66, false);
    ctx.bezierCurveTo(100, 55, 122, 27.5, 120, 20);
    ctx.bezierCurveTo(122, 27.5, 121, 31.5, 150, 70);
    ctx.closePath();
    ctx.strokeStyle = 'rgba(109,195,250,0.2)';
    ctx.lineWidth = 1;
    ctx.fillStyle = lineargradient;
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;
    ctx.shadowBlur = 2;
    ctx.shadowColor = "rgba(50, 50, 50, 0.5)";
    ctx.stroke();
    ctx.fill();
  }
}

canvas {
  margin: 75px;
  height: 300px;
  width: 300px;
  transform: scale(1.5);
}
body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<canvas id='canvas' height='300' width='300'></canvas>

Expandir fragmento

Usando la API de ruta

Mostrar fragmento de código

window.onload = function() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.lineJoin = 'miter';
    var p = new Path2D("M120 20 Q117.5 30 146 68 A34 34 0 1 1 92 68 Q117.5 35 120 20z");
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 2;
    ctx.fillStyle = '#77CCEE'
    ctx.stroke(p);
    ctx.fill(p);
  }
}

canvas {
  margin: 50px;
  height: 100px;
  width: 200px;
  transform: scale(1.5);
}

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<canvas id='canvas'></canvas>

Expandir fragmento

^{Nota: Como se mencionó en mi respuesta aquí , IE y Safari aún no admiten la API de ruta.}

Otras lecturas:

— Harry
fuente

No veo cómo svg es la mejor opción siempre. Sin duda, es una mejor opción en muchos casos como este. Pero el lienzo tiene sus propias ventajas. Buena respuesta. de su respuesta puedo entender eso, ¡ciertamente es mucho más fácil usar SVG!

— Max Payne

Sí @TimKrul, es más fácil escribir / usar SVG. Canvas tiene sus propias ventajas, pero, sea lo que sea que leí, no es demasiado ventajoso cuando se usa para formas simples como logotipos, principalmente porque está basado en ráster a diferencia de SVG.

— Harry

25

También encontré esto en Codepen hecho por el usuario Ana Tudor usando CSS y el box-shadowestilo y las ecuaciones paramétricas. Muy simple, muy poco código. Y muchos navegadores admiten el estilo CSS3 Box-shadow:

body {
  background-color: black;
}
.tear {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.125em;
  width: 0.25em;
  height: 0.25em;
  border-radius: 50%;
  box-shadow: 0em -5em red, 0.00118em -4.97592em #ff1800, 0.00937em -4.90393em #ff3000, 0.03125em -4.7847em #ff4800, 0.07283em -4.6194em #ff6000, 0.13915em -4.40961em #ff7800, 0.23408em -4.15735em #ff8f00, 0.36em -3.86505em #ffa700, 0.51777em -3.53553em #ffbf00, 0.70654em -3.17197em gold, 0.92382em -2.77785em #ffef00, 1.16547em -2.35698em #f7ff00, 1.42582em -1.91342em #dfff00, 1.69789em -1.45142em #c7ff00, 1.97361em -0.97545em #afff00, 2.2441em -0.49009em #97ff00, 2.5em 0.0em #80ff00, 2.73182em 0.49009em #68ff00, 2.93032em 0.97545em #50ff00, 3.08681em 1.45142em #38ff00, 3.19358em 1.91342em #20ff00, 3.24414em 2.35698em #08ff00, 3.23352em 2.77785em #00ff10, 3.15851em 3.17197em #00ff28, 3.01777em 3.53553em #00ff40, 2.81196em 3.86505em #00ff58, 2.54377em 4.15735em #00ff70, 2.21783em 4.40961em #00ff87, 1.84059em 4.6194em #00ff9f, 1.42017em 4.7847em #00ffb7, 0.96608em 4.90393em #00ffcf, 0.48891em 4.97592em #00ffe7, 0.0em 5em cyan, -0.48891em 4.97592em #00e7ff, -0.96608em 4.90393em #00cfff, -1.42017em 4.7847em #00b7ff, -1.84059em 4.6194em #009fff, -2.21783em 4.40961em #0087ff, -2.54377em 4.15735em #0070ff, -2.81196em 3.86505em #0058ff, -3.01777em 3.53553em #0040ff, -3.15851em 3.17197em #0028ff, -3.23352em 2.77785em #0010ff, -3.24414em 2.35698em #0800ff, -3.19358em 1.91342em #2000ff, -3.08681em 1.45142em #3800ff, -2.93032em 0.97545em #5000ff, -2.73182em 0.49009em #6800ff, -2.5em 0.0em #7f00ff, -2.2441em -0.49009em #9700ff, -1.97361em -0.97545em #af00ff, -1.69789em -1.45142em #c700ff, -1.42582em -1.91342em #df00ff, -1.16547em -2.35698em #f700ff, -0.92382em -2.77785em #ff00ef, -0.70654em -3.17197em #ff00d7, -0.51777em -3.53553em #ff00bf, -0.36em -3.86505em #ff00a7, -0.23408em -4.15735em #ff008f, -0.13915em -4.40961em #ff0078, -0.07283em -4.6194em #ff0060, -0.03125em -4.7847em #ff0048, -0.00937em -4.90393em #ff0030, -0.00118em -4.97592em #ff0018;
}

<div class="tear"></div>

Expandir fragmento

— Luke Shimkus
fuente

77

Sin embargo, esto no se parece al tipo de lágrima que se solicita.

— doppelgreener

20

Versión CSS

Como hay algunas pocas respuestas aquí, pensé por qué no agregarlo con otro método. Esto está utilizando HTML y CSS para crear la lágrima.

Esto le permitirá cambiar el color del borde y el fondo de la lágrima y también cambiar el tamaño de la parte superior.

Usando un solo divpodemos crear un círculo con bordery border-radius. Luego, usando pseudo elementos ( :before& :after) creamos un triángulo CSS ^{más aquí} , esto actuará como la punta de la lágrima. Usando :beforecomo borde colocamos :afteren la parte superior con un tamaño más pequeño y el color de fondo deseado.

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid;
  margin: 80px auto;
  position: relative;
}
div:before,
div:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
}
div:before {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 104px solid black;
  top: -75px;
}
div:after {
  border-left: 46px solid transparent;
  border-right: 46px solid transparent;
  border-bottom: 96px solid #fff;
  top: -66px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
}

<div></div>

Expandir fragmento

Aquí hay una demostración de la lágrima con un color de fondo.

Mostrar fragmento de código

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid;
  background: red;
  margin: 80px;
  position: relative;
}
div:before,
div:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
}
div:before {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid black;
  top: -70px;
}
div:after {
  border-left: 46px solid transparent;
  border-right: 46px solid transparent;
  border-bottom: 96px solid red;
  top: -66px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
}

<div></div>

Expandir fragmento

Es tan simple como poner un color de fondo divy cambiar el :after bottom-bordercolor al mismo. Para cambiar el borde, también deberá cambiar el divcolor del borde y el :beforecolor de fondo.

— Rubicundo
fuente

Ruddy, al lápiz le falta un valor de color de fondo.

— Persijn

2

@Persijn Harry dijo algo en el chat y lo estaba mirando en ese bolígrafo olvidando que se guarda automáticamente de vez en cuando. Jaja, lo pondré de nuevo como estaba. Hecho.

— Ruddy

17

Es bastante fácil hacer esto con SVG simplemente usando un recurso de conversión de imágenes como http://image.online-convert.com/convert-to-svg , que se utilizó para crear lo siguiente:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="213.000000pt" height="300.000000pt" viewBox="0 0 213.000000 300.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.12, written by Peter Selinger 2001-2015
</metadata>
<g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M1035 2944 c-143 -250 -231 -380 -508 -752 -347 -465 -432 -616 -493
-882 -91 -394 10 -753 285 -1013 508 -479 1334 -361 1677 240 126 221 165 494
105 726 -66 254 -178 452 -609 1076 -96 140 -226 335 -288 435 -155 249 -135
229 -169 170z m85 -212 c40 -69 192 -298 543 -818 268 -396 354 -593 364 -835
12 -281 -82 -509 -296 -714 -103 -99 -236 -173 -396 -221 -82 -25 -105 -27
-260 -28 -148 -1 -181 2 -255 22 -348 96 -611 357 -691 689 -41 167 -25 392
41 587 62 185 154 334 444 716 177 235 320 444 402 592 27 49 51 88 54 88 3 0
25 -35 50 -78z"/>
</g>
</svg>

Expandir fragmento

— Anónimo
fuente

99

@Persijn ¿por qué sigues preguntando copiado de algún editor? Svg es svg, puedes usar la herramienta que quieras para crear una.

— Abhinav Gauniyal

2

@AbhinavGauniyal: 'editores' como quieras llamarlos, agrega 'pelusa' adicional a las declaraciones. Por ejemplo, 300.000000pty metadatos que realmente no son necesarios

— jbutler483

12

@Persijn, ¿qué quieres decir con mano / codificado? Alguien acaba de hacer / ilustrador manual / codificado para facilitar sus tareas de codificación, y todavía produce lo mismo. Por otra parte, cuando está usando svg en el navegador, ¿por qué no lo codifica o usa a mano usando lenguaje ensamblador? y por qué detenerse en el ensamblaje, entregarlo / codificarlo con cables o simplemente dibujarlo usted mismo. Esta no es una razón que esperaba.

— Abhinav Gauniyal

2

@ jbutler483 sí y se pueden recortar. Hay muchas herramientas que hacen eso por usted, aquí hay una para usted github.com/svg/svgo

— Abhinav Gauniyal

66

@persijn esta respuesta proporciona las rutas de svg necesarias. Realmente no tengo idea de cuál es tu objeción.

— user428517

14

Si elige usar SVG, debe leer en las rutas. También sugeriría un editor SVG.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="-0.05 0 1195.1 703" preserveAspectRatio="xMidYMid meet" zoomAndPan="disable" transform="">
    <defs id="svgEditorDefs">
        <line id="svgEditorLineDefs" stroke="black" style="fill: none; vector-effect: non-scaling-stroke; stroke-width: 1px;"/>
    </defs>
    <rect id="svgEditorBackground" x="0" y="0" width="1195" height="703" style="fill: none; stroke: none;"/>
    <path stroke="black" id="e1_circleArc" style="fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke;" d="M 198 207 a 117.969 117.969 0 1 0 213 8" transform=""/>
    <path stroke="black" id="e4_circleArc" style="fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke;" transform="" d="M 411.348 215.696 a 349.677 349.677 0 0 0 -110.37 -131.718"/>
    <path stroke="black" style="fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke;" transform="matrix(-0.182706 -0.983168 0.983168 -0.182706 157.664 417.408)" id="e6_circleArc" d="M 301.799 202.299 a 329.763 329.763 0 0 0 -102.951 -124.781"/>
</svg>

Expandir fragmento

— Brennen Sprimont
fuente

1

¿Por qué usarías una línea dentro de una etiqueta defs? ¿Y no puedes hacer esta forma en un camino no 3 + un rect?

— Persijn

6

Aquí hay cuatro formas de lágrima SVG progresivamente más simples:

<svg viewbox="-20 -20 180 180">
  <g stroke="black" fill="none">
    
    <path transform="translate(0)"
     d="M   0  0
        C   0 10  10 17  10 27
        C  10 40 -10 40 -10 27
        C -10 17   0 10   0  0
        Z"/>

    <path transform="translate(40)"
     d="M   0  0
        C   0 16  15 25   5 34
        Q   0 38         -5 34
        C -15 25   0 16   0  0
        Z"/>
    
    <path transform="translate(80)"
     d="M   0  0
        C   0 10  18 36   0 36
        S          0 10   0  0
        Z"/>

    <path transform="translate(120)"
     d="M   0  0
        Q  18 36   0 36
        T          0  0
        Z"/>
    
    
    
    
    <g stroke-width="0.25" stroke="red">
      <g transform="translate(0)">
        <ellipse rx="1" ry="1" cx="0"   cy="0" />
        <ellipse rx="1" ry="1" cx="0"   cy="10"/>
        <ellipse rx="1" ry="1" cx="10"  cy="17"/>
        <ellipse rx="1" ry="1" cx="10"  cy="27"/>
        <ellipse rx="1" ry="1" cx="10"  cy="40"/>
        <ellipse rx="1" ry="1" cx="-10" cy="40"/>
        <ellipse rx="1" ry="1" cx="-10" cy="27"/>
        <ellipse rx="1" ry="1" cx="-10" cy="17"/>
        <line x1="0"   y1="0"  x2="0"   y2="10"/>
        <line x1="10"  y1="17" x2="10"  y2="40"/>
        <line x1="-10" y1="40" x2="-10" y2="17"/>
      </g>
      <g transform="translate(40)">
        <ellipse rx="1" ry="1" cx="0"   cy="0" />
        <ellipse rx="1" ry="1" cx="0"   cy="16"/>
        <ellipse rx="1" ry="1" cx="15"  cy="25"/>
        <ellipse rx="1" ry="1" cx="5"   cy="34"/>
        <ellipse rx="1" ry="1" cx="0"   cy="38"/>
        <ellipse rx="1" ry="1" cx="-5"  cy="34"/>
        <ellipse rx="1" ry="1" cx="-15" cy="25"/>
        <line x1="0"  y1="0"  x2="0"   y2="16"/>
        <line x1="15" y1="25" x2="0"   y2="38"/>
        <line x1="0"  y1="38" x2="-15" y2="25"/>
      </g>
      <g transform="translate(80)">
        <ellipse rx="1" ry="1" cx="0"   cy="0" />
        <ellipse rx="1" ry="1" cx="0"   cy="10"/>
        <ellipse rx="1" ry="1" cx="18"  cy="36"/>
        <ellipse rx="1" ry="1" cx="0"   cy="36"/>
        <ellipse rx="1" ry="1" cx="-18" cy="36" stroke="gray"/>
        <line x1="0"  y1="0"  x2="0"   y2="10"/>
        <line x1="18" y1="36" x2="0"   y2="36"/>
        <line x1="0"  y1="36" x2="-18" y2="36" stroke="gray" stroke-dasharray="0.5"/>
      </g>
      <g transform="translate(120)">
        <ellipse rx="1" ry="1" cx="0"   cy="0" />
        <ellipse rx="1" ry="1" cx="18"  cy="36"/>
        <ellipse rx="1" ry="1" cx="0"   cy="36"/>
        <ellipse rx="1" ry="1" cx="-18" cy="36" stroke="gray"/>
        <line x1="18" y1="36" x2="0"   y2="36"/>
        <line x1="0"  y1="36" x2="-18" y2="36" stroke="gray" stroke-dasharray="0.5"/>
      </g>
    </g>    
  </g>
  <g font-size="6" transform="translate(-1.5,-4)">
    <text x="-10" y="-8"># of unique points:</text>
    <text transform="translate(  0)">8</text>
    <text transform="translate( 40)">7</text>
    <text transform="translate( 80)">4</text>
    <text transform="translate(120)">3</text>
  </g>
</svg>

Expandir fragmento

— Andrew Willems
fuente

¿Cómo creo una lágrima en HTML?

Enfoque SVG:

Radio de borde básico

Radio de borde avanzado

Alternativas

Versión CSS

Versión SVG

La caída en cuestión:

Para IE 5-8 (VML)

GOTA: 💧 ( &#128167;)

GOTA NEGRA: 🌢 ( &#127778;)

Lienzo HTML

Usando curvas cuadráticas

Usando curvas de Bezier

Usando la API de ruta

Versión CSS

GOTA: 💧 ( `💧`)

GOTA NEGRA: 🌢 ( `🌢`)