223

Come faccio a creare una forma come questa da visualizzare in una pagina Web?

Non voglio usare le immagini poiché potrebbero risultare sfocate nel ridimensionamento

Forma a goccia che devo creare con HTML, CSS o SVG

Ho provato 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>

Espandi frammento

Quello si è rivelato davvero avvitato.

E poi ho provato con SVG:

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

Espandi frammento

Ha ottenuto la forma, ma la parte inferiore non era curva.

C'è un modo per creare questa forma in modo che possa essere utilizzata in una pagina HTML?

— Persijn
fonte

12

"Non voglio usare le immagini poiché potrebbero risultare sfocate nel ridimensionamento", perché ridimensionate l'immagine? Non diventano sfocati se si utilizza [srcset]o l' <picture>elemento. Meglio ancora, basta collegare a un'immagine in formato svg:<img src="tear.svg" alt="Teardrop"/>

— zzzzBov

32

@zzzzBov: stai davvero raccomandando l' pictureelemento? Nessun supporto per IE, nessun supporto per le prime versioni di Chrome, nessun supporto per Safari. Dovrei continuare?

— jbutler483,

9

@zzzzBov. why are you scaling the image?Bene, l'immagine può apparire sfocata senza che lo sviluppatore la ridimensioni. Tutto ciò di cui hai bisogno è uno zoom del browser. Nel mio caso, ho uno schermo HighDPI e molte immagini sfocate. Quindi, sì, se riesci a evitare le immagini usando SVG, provaci.

— Nolonar,

63

Unicode risolve tutto ... U + 1F4A7 💧

— Thomas Weller,

21

@Thomas I see a square: / i.stack.imgur.com/8fXMf.png

— user000001

327

Approccio SVG:

Puoi ottenere facilmente la doppia curva con un SVG in linea e l' <path/>elemento invece <polygon/>dell'elemento che non consente forme curve.

L'esempio seguente utilizza l' <path/>elemento con:

2 comandi quadratici della curva di Bezier per le 2 curve superiori (linee che iniziano con Q)
1 comando arco per quello in basso (linea che inizia 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>

Espandi frammento

SVG è un ottimo strumento per creare questo tipo di forme con doppie curve. Puoi controllare questo post sulle doppie curve con un confronto SVG / CSS. Alcuni dei vantaggi dell'utilizzo di SVG in questo caso sono:

Controllo della curva
Controllo riempimento (opacità, colore)
Controllo della corsa (larghezza, opacità, colore)
Quantità di codice
Tempo per costruire e mantenere la forma
Scalabile
Nessuna richiesta HTTP (se utilizzata in linea come nell'esempio)

Il supporto del browser per SVG inline torna a Internet Explorer 9. Vedere canIuse per ulteriori informazioni.

— web-tiki
fonte

può ridursi a: <svg width="100%" height="100%" viewBox="0 0 8 8" /> <path d="M4 1L3 4A1.2 2 0 1 0 5 4"/> </svg> ... questo riempirà l'area che gli dai, quindi potrebbe far

— cadere le

1

@technosaurus il problema con la riduzione del numero di comandi d="..."nell'attributo è che non hai più la doppia curva nella parte superiore della discesa.

— web-tiki,

10

+1 perché per questo dovresti usare SVG, non CSS. Le funzionalità CSS che avresti bisogno per ottenerlo hanno circa lo stesso supporto browser di SVG, quindi non c'è alcun vantaggio per CSS su quel punteggio. I CSS possono fare forme, ma non è per questo che sono progettati; non provare a martellare un chiodo con un cacciavite solo per essere intelligente quando puoi farlo altrettanto bene con uno strumento progettato per il lavoro.

— Simba

6

Ancora meglio: crea un file SVG e utilizzalo <img />nel documento ipertestuale.

— Andreas Rejbrand,

@AndreasRejbrand che può essere una buona idea a seconda del progetto, ma aggiunge una richiesta HTTP che OP sembra voler evitare.

— web-tiki

136

Raggio di confine di base

Puoi farlo in CSS relativamente facilmente usando border-radius 'e trasformazioni. Il tuo CSS era solo un po 'fuori.

.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>

Espandi frammento

Raggio di frontiera avanzato

Questo sarà molto simile al precedente ma gli darà un po 'più di 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>

Espandi frammento

— Stewartside
fonte

4

@zzzzBov Non capisco fino in fondo come sia lo strumento sbagliato, OP ha chiesto una soluzione CSS o SVG e ho trovato una soluzione CSS che si adatta alla descrizione il più vicino possibile. È leggero e facile da modificare.

— Stewartside,

12

@zzzzBov L'uso dei CSS per immagini e sprite è un uso comune. È un pezzo di codice molto minimale per generare una "Immagine" generica. Credo che sia appropriato perché è utilizzabile nelle specifiche delle domande di essere utilizzabile su una pagina web.

— Stewartside,

13

@zzzzBov: CSS si adatta perfettamente alle forme. Chi può dire a che cosa serve tale forma? semanticamente un'immagine - OP ha chiaramente affermato di non voler utilizzare un'immagine, altrimenti perché altrimenti si dovrebbe porre una domanda del genere?

— jbutler483,

46

@ jbutler483, "CSS è perfetto per le forme" no, è terribile. Solo perché si può non significa che si dovrebbe . Introduce ogni sorta di immondizia nel markup ed è un casino noioso da mantenere. Le immagini sono molto più semplici da mantenere in quanto sono facilmente separate nel proprio file autonomo individuale.

— zzzzBov,

19

"Garbage in the markup" si verifica quando si utilizza bootstrap o si utilizzano font di icone fantastiche. Scherzi a parte, penso che stai andando un po 'esageratamente per cose del genere quando (abbastanza ovviamente) questo può essere ottenuto usando una dichiarazione sul raggio del confine. Ma fieno, chi ti dice di non usare le immagini?

— jbutler483,

88

Il tuo problema principale con il tuo codice CSS era:

Hai usato un'altezza diversa dalla larghezza
Non hai ruotato la dimensione dell'angolo corretto

Quindi, "risolvendo" questi problemi, potresti generare:

.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>

Espandi frammento

Si noti inoltre che per risparmiare sulla lunghezza CSS, è possibile riscrivere le proprietà del bordo del raggio su:

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

questo potrebbe essere migliorato con pseudo elementi come mostrato in questo violino

alternative

Ho trovato questo da Vinay Challuru su codepen.

Si noti che con la logica qui, sono stato in grado di creare SVG per quasi ogni possibile forma di build / ecc. Ad esempio, un output rapido è stato:

Mostra snippet di codice

<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>

Espandi frammento

Sta usando un SVG e ti permette di modificare la forma in più modi, avendo la possibilità di alterare la sua forma al risultato desiderato:

Mostra snippet di codice

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>

Espandi frammento

Dichiarazione di non responsabilità Non ho scritto la penna sopra, ma solo la fonte.

Versione CSS

Anche se questo è tutt'altro che completo, potresti anche essere in grado di generare questa forma utilizzando i CSS.

Mostra snippet di codice

.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>

Espandi frammento

Versione SVG

Dovrei sapere che SVG dovrebbe essere in cima a questa risposta, tuttavia, mi piace una sfida e quindi ecco un tentativo 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>

Espandi frammento

Alterando i pathvalori, potresti modificare la forma del tuo design a goccia.

— jbutler483
fonte

10

Sembrano tutti molto ... prolissi. La soluzione js è particolarmente assurda.

— egid,

4

@egid: nella mia risposta ho dichiarato di non aver creato la versione js. Nota anche che la versione js ti consente di modificare la forma in fase di esecuzione

— jbutler483

55

IMO questa forma richiede curve a lisci per garantire la continuità della curva.

Il calo in questione:

Per il calo in questione,

non è possibile utilizzare curve morbide, poiché i punti di controllo non avranno la stessa lunghezza. Ma dobbiamo ancora far sì che i punti di controllo si trovino esattamente opposti (180 gradi) ai precedenti punti di controllo, per garantire la piena continuità della curva L'immagine seguente mostra questo punto:

inserisci qui la descrizione dell'immagine
Nota : le curve rosse e blu sono due diverse curve quadratiche.

stroke-linejoin="miter", per la parte superiore appuntita.
Poiché questa forma utilizza solo ccomandi successivi , possiamo ometterla.

Ecco lo snippet finale:

<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>

Espandi frammento

Tuttavia , TBH , le curve di risposta accettate non sono del tutto continue.

Per IE 5-8 (VML)

Funziona solo in IE 5-8. VML utilizza comandi diversi rispetto a SVG . Per esempio. usa v per i relativi beziers cubici .

Nota: questo frammento non verrà eseguito anche in IE 5-8. Devi creare un file html ed eseguirlo direttamente nel browser.

<!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
fonte

"le curve morbide non possono essere utilizzate, poiché i punti di controllo non avranno la stessa lunghezza." "Smooth" non significa solo che le maniglie tangenti (punti di controllo) siedono su una linea retta? Perché devono avere la stessa lunghezza?

— Niccolò M.

2

@NiccoloM. In svg, la curva liscia (comandi T e S) significa che la maniglia è simmetricamente opposta, oltre che uguale alla lunghezza della maniglia precedente . In un linguaggio normale, la curva liscia può significare lunghezze di maniglia diverse, ma in svg la lunghezza è uguale alla maniglia di curve precedente :)

— Max Payne

42

Oppure, se il carattere dei tuoi spettatori lo supporta, usa i caratteri Unicode

DROPLET: 💧 ( `💧`)

o

DROPLET NERO: 🌢 ( `🌢`)

Scala di conseguenza!

— Gnubie
fonte

Puoi usarlo con @ font-face, ma poi hai un file di font da conservare nel posto giusto e così via.

— 1934286,

3

SVG e un simbolo Unicode dedicato come questo sono buoni. CSS per questo è male. PNG va bene, ma non è perfetto poiché è grafica raster. JPG è estremamente cattivo, così grave che avrei avuto incubi se lo vedessi.

— Andreas Rejbrand,

@AndreasRejbrand un PNG 20x20 si ridimensionerebbe peggio di un JPG 200x200. E, con le stesse dimensioni, un JPG non compresso equivale a un PNG. Sono entrambi raster e soffrono degli stessi problemi.

— nico,

@nico: in teoria sì, puoi usare JPG con compressione zero. Ma Internet è pieno di disastri come questo: en.wikipedia.org/wiki/Atomic_number#/media/…

— Andreas Rejbrand,

28

Personalmente userei un SVG per questo. È possibile creare SVG nella maggior parte dei software di grafica vettoriale. Consiglierei:

Inkscape
Schizzo
Adobe Illustrator

Ne ho fatto uno qui sotto che è una traccia della tua forma in 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>

Espandi frammento

— Djave
fonte

27

HTML Canvas

Questa è un'opzione scoperta finora in questo thread. I comandi utilizzati per i disegni su tela sono molto simili a SVG (e web-tiki merita i crediti per l'idea di base utilizzata in questa risposta).

La forma in questione può essere creata utilizzando i comandi curva di tela (Quadratic o Bezier) o l'API Path. La risposta contiene esempi per tutti e tre i metodi.

Il supporto del browser per Canvas è abbastanza buono .

Utilizzo delle curve quadratiche

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>

Espandi frammento

Di seguito è una versione avanzata con riempimento sfumato e ombre. Ho anche incluso un hovereffetto sulla forma per illustrare uno svantaggio di Canvas rispetto a SVG. La tela è basata su raster (pixel) e quindi apparirebbe sfocata / pixel se ridimensionata oltre un certo punto. L'unica soluzione sarebbe quella di ridipingere la forma su ogni ridimensionamento del browser che è un sovraccarico.

Mostra snippet di codice

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>

Espandi frammento

Utilizzo delle curve di Bezier

Mostra snippet di codice

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>

Espandi frammento

Utilizzo dell'API Path

Mostra snippet di codice

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>

Espandi frammento

^{Nota: come indicato nella mia risposta qui , l'API Path non è ancora supportata da IE e Safari.}

Ulteriori letture:

— Harry
fonte

Non vedo come svg sia sempre l'opzione migliore. è certamente l'opzione migliore in molti casi come questo. Ma la tela ha i suoi pro. Bella risposta. dalla tua risposta lo capisco, è sicuramente molto più facile usare SVG!

— Max Payne,

Sì @ TimKrul, è più facile scrivere / utilizzare SVG. Canvas ha i suoi pro ma da qualunque cosa io legga non è troppo vantaggioso quando si usa per un semplice logo come forme principalmente perché è basato su raster a differenza di SVG.

— Harry,

25

Ho anche trovato questo su Codepen creato dall'utente Ana Tudor usando CSS e lo box-shadowstile e le equazioni parametriche. Codice molto semplice, molto piccolo. E molti browser supportano lo stile CSS-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>

Espandi frammento

— Luke Shimkus
fonte

7

Tuttavia, questo non assomiglia al tipo di lacrima richiesto.

— doppelgreener,

20

Versione CSS

Dato che ci sono poche risposte qui, ho pensato perché non aggiungerlo ad un altro metodo. Questo utilizza sia HTML che CSS per creare la lacrima.

Questo ti permetterà di cambiare il colore del bordo e dello sfondo della lacrima e ridimensionare anche la parte superiore di esso.

Usando un singolo divpossiamo creare un cerchio con bordere border-radius. Quindi usando pseudo elementi ( :before& :after) creiamo un triangolo CSS ^{più qui} , questo fungerà da punta della lacrima. Usando :beforecome bordo mettiamo :afterin cima con una dimensione più piccola e il colore di sfondo desiderato.

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>

Espandi frammento

Ecco una demo della lacrima con un colore di sfondo

Mostra snippet di codice

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>

Espandi frammento

È semplice come mettere un colore di sfondo sullo dive cambiare il :after bottom-bordercolore sullo stesso. Per cambiare il bordo dovrai cambiare anche il divcolore del bordo e il :beforecolore di sfondo.

— rubicondo
fonte

Ruddy la penna non ha un valore di colore di sfondo.

— Persijn,

2

@Persijn Harry ha detto qualcosa in chat e lo stavo guardando su quella penna dimenticandomi che ogni tanto salva automaticamente l'auto. Haha, lo rimetterò com'era. Fatto.

— Ruddy,

17

È abbastanza facile farlo con SVG semplicemente usando una risorsa di conversione di immagini come http://image.online-convert.com/convert-to-svg , che è stata utilizzata per creare quanto segue:

<?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>

Espandi frammento

— Anonimo
fonte

9

@Persijn perché continui a chiedere copiati da qualche editore? Svg è svg, puoi usare qualunque strumento tu voglia crearne uno.

— Abhinav Gauniyal,

2

@AbhinavGauniyal: 'editor' come ti piace chiamarli, aggiungi 'lanugine' extra alle dichiarazioni. Ad esempio, 300.000000pte metadati che non sono realmente necessari

— jbutler483,

12

@Persijn cosa intendi per mano / codificato. Qualcuno ha appena creato / hand / coded Illustrator per facilitare le proprie attività di codifica, e produce ancora la stessa cosa. Quindi di nuovo quando si utilizza svg nel browser, perché non lo si passa a mano / codice usando il linguaggio assembly? e perché fermarsi all'assemblaggio, passarlo a mano / codificarlo usando i fili o semplicemente disegnarlo da soli. Questo non è un motivo che mi aspettavo.

— Abhinav Gauniyal,

2

@ jbutler483 sì e possono essere ritagliati. Ci sono molti strumenti che lo fanno per te, eccone uno per te github.com/svg/svgo

— Abhinav Gauniyal

6

@persijn questa risposta fornisce i percorsi svg necessari. non ho davvero idea di quale sia la tua obiezione.

— user428517

14

Se scegli di utilizzare SVG, dovresti leggere i percorsi. Vorrei anche suggerire 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>

Espandi frammento

— Brennen Sprimont
fonte

1

Perché dovresti usare una linea all'interno di un tag defs? E non puoi fare questa forma in un percorso non 3 + un rettangolo?

— Persijn,

6

Ecco quattro forme a goccia SVG progressivamente più semplici:

<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>

Espandi frammento

— Andrew Willems
fonte

Come faccio a creare una lacrima in HTML?

Approccio SVG:

Raggio di confine di base

Raggio di frontiera avanzato

alternative

Versione CSS

Versione SVG

Il calo in questione:

Per IE 5-8 (VML)

DROPLET: 💧 ( &#128167;)

DROPLET NERO: 🌢 ( &#127778;)

HTML Canvas

Utilizzo delle curve quadratiche

Utilizzo delle curve di Bezier

Utilizzo dell'API Path

Versione CSS

DROPLET: 💧 ( `💧`)

DROPLET NERO: 🌢 ( `🌢`)