222

Wie erstelle ich eine solche Form, um sie auf einer Webseite anzuzeigen?

Ich möchte keine Bilder verwenden, da diese beim Skalieren verschwommen werden

Teardrop-Form, die ich mit HTML, CSS oder SVG erstellen muss

Ich habe es mit CSS versucht :

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

Erweitern Sie das Snippet

Das stellte sich als richtig beschissen heraus.

Und dann habe ich es mit SVG versucht:

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

Erweitern Sie das Snippet

Es hat die Form bekommen, aber der untere Teil war nicht gekrümmt.

Gibt es eine Möglichkeit, diese Form zu erstellen, damit sie in einer HTML-Seite verwendet werden kann?

html css svg css-shapes Persijn
quelle

12

"Ich möchte keine Bilder verwenden, da diese beim Skalieren verschwommen werden", warum skalieren Sie das Bild? Sie werden nicht verschwommen, wenn Sie [srcset]oder das <picture>Element verwenden. Besser noch, verlinken Sie einfach auf ein SVG-Bild:<img src="tear.svg" alt="Teardrop"/>

zzzzBov

32

@zzzzBov: Empfehlen Sie das pictureElement wirklich ? Keine Unterstützung für IE, keine Unterstützung für frühere Versionen von Chrome, keine Unterstützung für Safari. Soll ich weitermachen?

jbutler483

9

@zzzzBov. why are you scaling the image?Nun, das Bild kann verschwommen erscheinen, ohne dass der Entwickler es skaliert. Dazu benötigen Sie lediglich einen vergrößerten Browser. In meinem Fall habe ich einen HighDPI-Bildschirm und viele verschwommene Bilder. Also, ja, wenn Sie Bilder mit SVG vermeiden können, machen Sie es.

Nolonar

63

Unicode löst alles ... U + 1F4A7 💧

Thomas Weller

21

@ Thomas Ich sehe ein Quadrat: / i.stack.imgur.com/8fXMf.png

user000001

327

SVG-Ansatz:

Sie können die Doppelkurve problemlos mit einem Inline-SVG und dem <path/>Element anstelle des <polygon/>Elements erzielen, das keine gekrümmten Formen zulässt.

Im folgenden Beispiel wird das <path/>Element mit verwendet:

2 quadratische Bezierkurvenbefehle für die 2 oberen Kurven (Linien beginnend mit Q)
1 Bogenbefehl für den großen unteren (Zeile beginnend mit 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>

Erweitern Sie das Snippet

SVG ist ein großartiges Werkzeug, um diese Art von Formen mit doppelten Kurven zu erstellen. Sie können diesen Beitrag über Doppelkurven mit einem SVG / CSS-Vergleich überprüfen . Einige der Vorteile der Verwendung von SVG in diesem Fall sind:

Kurvensteuerung
Füllkontrolle (Deckkraft, Farbe)
Strichsteuerung (Breite, Deckkraft, Farbe)
Menge des Codes
Zeit, die Form aufzubauen und beizubehalten
Skalierbar
Keine HTTP-Anfrage (bei Inline-Verwendung wie im Beispiel)

Die Browserunterstützung für Inline-SVG geht auf Internet Explorer 9 zurück. Weitere Informationen finden Sie unter canIuse .

Web-Tiki
quelle

es kann sich reduzieren auf: <svg width="100%" height="100%" viewBox="0 0 8 8" /> <path d="M4 1L3 4A1.2 2 0 1 0 5 4"/> </svg> ... dies wird den Bereich füllen, den Sie ihm geben, so dass "fette" oder "dünne" Regentropfen entstehen können ... bei Bedarf auf feste Höhe / Breite wechseln

Technosaurus

1

@technosaurus Das Problem beim Reduzieren der Anzahl der Befehle im d="..."Attribut besteht darin, dass Sie die Doppelkurve nicht mehr oben im Drop haben.

Web-Tiki

10

+1, weil Sie dafür SVG verwenden sollten, nicht CSS. Die CSS-Funktionen, die Sie benötigen, um dies zu erreichen, haben ungefähr die gleiche Browserunterstützung wie SVG, sodass CSS in dieser Hinsicht keinen Vorteil bietet. CSS kann Formen erstellen, aber dafür wurde es nicht entwickelt. Versuchen Sie nicht, einen Nagel mit einem Schraubendreher einzuschlagen, nur um klug zu sein, wenn Sie dies mit einem für diesen Job entwickelten Werkzeug genauso gut können.

Simba

6

Noch besser: Erstellen Sie eine SVG-Datei und verwenden Sie sie <img />im Hypertext-Dokument.

Andreas Rejbrand

@AndreasRejbrand, das je nach Projekt eine gute Idee sein kann, aber eine HTTP-Anfrage hinzufügt, die OP zu vermeiden scheint.

Web-Tiki

135

Grundlegender Randradius

Sie können dies in CSS relativ einfach mit Rahmenradius und Transformationen tun. Ihr CSS war nur ein bisschen raus.

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

Erweitern Sie das Snippet

Erweiterter Randradius

Dies wird sehr ähnlich zu oben sein, gibt ihm aber etwas mehr Form.

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

Erweitern Sie das Snippet

Stewartside
quelle

4

@zzzzBov Ich verstehe nicht ganz, wie es das falsche Tool ist. OP hat nach einer CSS- oder SVG-Lösung gefragt und ich habe eine CSS-Lösung gefunden, die so genau wie möglich zur Beschreibung passt. Es ist leicht und leicht zu modifizieren.

Stewartside

12

@zzzzBov Die Verwendung von CSS für Bilder und Sprites wird häufig verwendet. Es ist ein sehr minimaler Code, um ein generisches "Bild" zu generieren. Ich halte es für angemessen, da es innerhalb der Fragenspezifikation verwendet werden kann, auf einer Webseite verwendbar zu sein.

Stewartside

13

@zzzzBov: CSS eignet sich perfekt für Formen. Wer sagt, wofür eine solche Form verwendet wird? semantisch ein Bild - OP hat klar angegeben, dass sie kein Bild verwenden möchten. Warum sollte sonst eine solche Frage gestellt werden?

jbutler483

46

@ jbutler483, "CSS ist perfekt für Formen" nein, es ist schrecklich. Nur weil du kannst, heißt das nicht, dass du es solltest . Es führt alle Arten von Müll in Markups ein und ist ein mühsames Durcheinander. Bilder sind viel einfacher zu pflegen, da sie leicht in ihre eigene eigenständige Datei getrennt werden können.

zzzzBov

19

'Garbage in the Markup' tritt auf, wenn Sie Bootstrap oder fantastische Symbole für Schriftarten verwenden. Im Ernst, ich denke, Sie gehen für solche Dinge etwas übertrieben, wenn dies (ganz offensichtlich) mithilfe einer Randradiusdeklaration erreicht werden kann. Aber Heu, wer soll dir sagen, dass du keine Bilder verwenden sollst?

jbutler483

88

Ihr Hauptproblem mit Ihrem CSS-Code war:

Sie haben eine andere Höhe als Breite verwendet
Sie haben nicht die richtige Winkelgröße gedreht

Wenn Sie diese Probleme beheben, erhalten Sie Folgendes:

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

Erweitern Sie das Snippet

Um CSS-Länge zu sparen, können Sie Ihre Rahmenradius-Eigenschaften wie folgt umschreiben:

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

Dies könnte mit Pseudoelementen verbessert werden, wie in dieser Geige gezeigt

Alternativen

Ich habe das von Vinay Challuru gefunden auf Codepen.

Bitte beachten Sie, dass ich mit der Logik hier das SVG für nahezu jede mögliche Build-Form / etc. Erstellen konnte . Eine schnelle Ausgabe war zum Beispiel:

Code-Snippet anzeigen

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

Erweitern Sie das Snippet

Es verwendet ein SVG und ermöglicht es Ihnen, die Form auf verschiedene Arten zu ändern, wobei Sie die Form auf das gewünschte Ergebnis ändern können:

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

Haftungsausschluss Ich habe den obigen Stift nicht geschrieben, sondern nur bezogen.

CSS-Version

Obwohl dies noch lange nicht vollständig ist, können Sie diese Form möglicherweise auch mit CSS generieren.

Code-Snippet anzeigen

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

Erweitern Sie das Snippet

SVG-Version

Ich sollte wissen, dass SVG an der Spitze dieser Antwort stehen sollte, aber ich mag eine Herausforderung und hier ist ein Versuch mit 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>

Erweitern Sie das Snippet

Wenn Sie die pathWerte ändern, können Sie die Form Ihres Teardrop-Designs ändern.

jbutler483
quelle

10

Diese scheinen alle sehr ... ausführlich zu sein. Die js-Lösung ist besonders absurd.

egid

4

@egid: Ich habe in meiner Antwort angegeben, dass ich die js-Version nicht erstellt habe. Beachten Sie auch, dass Sie mit der js-Version die Form zur Laufzeit ändern können

jbutler483

55

IMO erfordert diese Form glatte Kurven- Bezier, um die Kontinuität der Kurve zu gewährleisten.

Der fragliche Tropfen:

Für den fraglichen Tropfen

Glatte Kurven können nicht verwendet werden, da Kontrollpunkte nicht gleich lang sind. Wir müssen jedoch sicherstellen , dass die Kontrollpunkte genau gegenüber den vorherigen Kontrollpunkten liegen (180 Grad), um die vollständige Kontinuität der Kurve zu gewährleisten. Das folgende Bild veranschaulicht diesen Punkt:

Geben Sie hier die Bildbeschreibung ein
Hinweis : Rote und blaue Kurven sind zwei verschiedene quadratische Kurven.

stroke-linejoin="miter"für den spitzen oberen Teil.
Da diese Form nur aufeinanderfolgende cBefehle verwendet, können wir sie weglassen.

Hier ist der letzte Ausschnitt:

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

Erweitern Sie das Snippet

TBH Die Kurven der akzeptierten Antwort sind jedoch nicht ganz kontinuierlich.

Für IE 5-8 (VML)

Funktioniert nur in IE 5-8. VML verwendet andere Befehle als SVG . Z.B. es verwendet v für relative kubische Bezier .

Hinweis: Dieses Snippet wird auch in IE 5-8 nicht ausgeführt. Sie müssen eine HTML-Datei erstellen und direkt im Browser ausführen.

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

"Glatte Kurven können nicht verwendet werden, da Kontrollpunkte nicht gleich lang sind." Bedeutet "glätten" nicht nur, dass die Tangentengriffe (Kontrollpunkte) auf einer geraden Linie liegen? Warum müssen sie gleich lang sein?

Niccolo M.

2

@NiccoloM. In svg bedeutet glatte Kurve (T- und S-Befehle), dass der Griff symmetrisch entgegengesetzt ist und der Länge des vorherigen Griffs entspricht . In der normalen Sprache kann eine glatte Kurve unterschiedliche Grifflängen bedeuten, aber in SVG entspricht die Länge auch dem vorherigen Kurvengriff :)

Max Payne

42

Wenn die Schriftart Ihrer Zuschauer dies unterstützt, verwenden Sie die Unicode-Zeichen

TROPFEN: 💧 ( `💧`)

oder

SCHWARZER TROPFEN: 🌢 ( `🌢`)

Skalieren Sie entsprechend!

Gnubie
quelle

Sie könnten dies mit @ font-face verwenden, aber dann haben Sie eine Schriftartdatei, die Sie an der richtigen Stelle aufbewahren können.

1934286

3

SVG und ein spezielles Unicode-Symbol wie dieses sind gut. CSS dafür ist schlecht. PNG ist in Ordnung, aber nicht perfekt, da es sich um Rastergrafiken handelt. JPG ist extrem schlecht, so schlecht, dass ich Albträume bekommen würde, wenn ich es sehen würde.

Andreas Rejbrand

@AndreasRejbrand ein 20x20 PNG würde am schlechtesten skalieren als ein 200x200 JPG. Bei gleicher Größe entspricht ein unkomprimiertes JPG einem PNG. Sie sind beide Raster und leiden unter den gleichen Problemen.

Nico

@nico: Theoretisch können Sie JPG ohne Komprimierung verwenden. Aber das Internet ist voll von Katastrophen wie dieser: en.wikipedia.org/wiki/Atomic_number#/media/…

Andreas Rejbrand

28

Ich persönlich würde dafür eine SVG verwenden. Sie können SVGs in den meisten Vektorgrafiken erstellen. Ich würde empfehlen:

Inkscape
Skizzieren
Adobe Illustrator

Ich habe unten eine erstellt, die Ihre Form in Illustrator nachzeichnet.

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

Erweitern Sie das Snippet

Djave
quelle

27

HTML-Canvas

Dies ist eine Option, die in diesem Thread bisher nicht behandelt wurde. Die für Canvas-Zeichnungen verwendeten Befehle sind SVG sehr ähnlich (und Web-Tiki verdient die Credits für die in dieser Antwort verwendete Grundidee).

Die betreffende Form kann entweder mit Canvas-eigenen Kurvenbefehlen (Quadratic oder Bezier) oder mit der Pfad-API erstellt werden. Die Antwort enthält Beispiele für alle drei Methoden.

Die Browserunterstützung für Canvas ist recht gut .

Quadratische Kurven verwenden

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>

Erweitern Sie das Snippet

Unten finden Sie eine erweiterte Version mit Verlaufsfüllung und Schatten. Ich habe auch einen hoverEffekt auf die Form eingefügt, um einen Nachteil von Canvas im Vergleich zu SVG zu veranschaulichen. Canvas basiert auf Raster (Pixel) und sieht daher unscharf / pixelig aus, wenn es über einen bestimmten Punkt hinaus skaliert wird. Die einzige Lösung hierfür wäre, die Form bei jeder Größenänderung des Browsers neu zu zeichnen, was ein Overhead ist.

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

Bezierkurven verwenden

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

Verwenden der Pfad-API

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

^{Hinweis: Wie in meiner Antwort hier erwähnt , wird die Pfad-API von IE und Safari noch nicht unterstützt.}

Weiterführende Literatur:

Harry
quelle

Ich sehe nicht, wie SVG immer bessere Option ist. In vielen Fällen ist dies sicherlich die bessere Option. Aber Leinwand hat ihre eigenen Profis. Gute Antwort. Aus Ihrer Antwort kann ich erkennen, dass es sicherlich viel einfacher ist, SVG zu verwenden!

Max Payne

Ja @TimKrul, es ist einfacher, SVG zu schreiben / zu verwenden. Canvas hat seine eigenen Vorteile, aber nach allem, was ich lese, ist es nicht allzu vorteilhaft, wenn es für einfache Logo-ähnliche Formen verwendet wird, vor allem, weil es im Gegensatz zu SVG auf Raster basiert.

Harry

25

Ich fand dies auch auf Codepen, das von der Benutzerin Ana Tudor unter Verwendung von CSS und den box-shadowStil- und Parametergleichungen erstellt wurde. Sehr einfacher, sehr kleiner Code. Und viele Browser unterstützen den CSS3-Box-Shadow-Stil:

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>

Erweitern Sie das Snippet

Luke Shimkus
quelle

7

Dies ähnelt jedoch nicht der Art von Träne, nach der gefragt wird.

Doppelgreener

20

CSS-Version

Da es hier ein paar Antworten gibt, dachte ich mir, warum ich es nicht mit einer anderen Methode ergänzen sollte. Dies verwendet sowohl HTML als auch CSS , um die Träne zu erstellen.

Auf diese Weise können Sie die Farbe des Randes und des Hintergrunds der Träne ändern und auch die Größe des oberen Teils ändern.

Mit einem einzigen können divwir einen Kreis mit borderund erstellen border-radius. Dann erstellen wir mit Pseudoelementen ( :before& :after) ein CSS-Dreieck ^{mehr hier} , wird dies tunals die Spitze des Teardrop. Mit dem:beforeals Rand platzieren wir:afteroben mit einer kleineren Größe und der gewünschten Hintergrundfarbe.

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>

Erweitern Sie das Snippet

Hier ist eine Demo der Träne mit einer Hintergrundfarbe

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

Es ist so einfach wie das Aufbringen einer Hintergrundfarbe auf die div und die :after bottom-borderFarbe in dieselbe zu ändern . Um den Rahmen zu ändern, müssen Sie auch die Rahmenfarbe divund die :beforeHintergrundfarbe ändern .

Ruddy
quelle

Ruddy dem Stift fehlt ein Hintergrundfarbwert.

Persijn

2

@Persijn Harry sagte etwas im Chat und ich sah es mir auf diesem Stift an und vergaß, dass es von Zeit zu Zeit automatisch gespeichert wird. Haha, ich werde es wieder so machen, wie es war. Getan.

Ruddy

17

Mit SVG ist dies recht einfach, wenn Sie nur eine Bildkonvertierungsressource wie http://image.online-convert.com/convert-to-svg verwenden, mit der Folgendes erstellt wurde:

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

Erweitern Sie das Snippet

Anonym
quelle

9

@Persijn warum fragst du immer wieder kopiert von einem Editor? Svg ist svg. Sie können jedes Tool verwenden, das Sie erstellen möchten.

Abhinav Gauniyal

2

@AbhinavGauniyal: 'Redakteure', wie Sie sie gerne nennen, fügen den Deklarationen zusätzlichen 'Flaum' hinzu. Zum Beispiel 300.000000ptund Metadaten, die nicht wirklich benötigt werden

jbutler483

12

@Persijn was meinst du mit hand / codiert. Jemand hat gerade einen / hand / codierten Illustrator erstellt, um seine Codierungsaufgaben zu vereinfachen, und er produziert immer noch dasselbe. Wenn Sie svg im Browser verwenden, warum geben Sie es nicht selbst in Assemblersprache ab / codieren es? und warum bei der Montage anhalten, es mit Drähten von Hand / Code codieren oder einfach selbst zeichnen. Dies ist kein Grund, den ich erwartet hatte.

Abhinav Gauniyal

2

@ jbutler483 ja und sie können herausgeschnitten werden. Es gibt viele Tools, die das für Sie tun, hier ist eines für Sie github.com/svg/svgo

Abhinav Gauniyal

6

@persijn Diese Antwort enthält die erforderlichen SVG-Pfade. Ich habe wirklich keine Ahnung, was Ihr Einwand ist.

user428517

14

Wenn Sie sich für SVG entscheiden, sollten Sie sich über Pfade informieren. Ich würde auch einen SVG-Editor vorschlagen.

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

Erweitern Sie das Snippet

Brennen Sprimont
quelle

1

Warum sollten Sie eine Zeile in einem defs-Tag verwenden? Und kannst du diese Form nicht auf einem Pfad machen, nicht auf 3 + a rect?

Persijn

6

Hier sind vier zunehmend einfachere SVG-Tropfenformen:

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

Erweitern Sie das Snippet

Andrew Willems
quelle

Wie erstelle ich eine Träne in HTML?

Antworten:

SVG-Ansatz:

Grundlegender Randradius

Erweiterter Randradius

Alternativen

CSS-Version

SVG-Version

Der fragliche Tropfen:

Für IE 5-8 (VML)

TROPFEN: 💧 ( `💧`)

SCHWARZER TROPFEN: 🌢 ( `🌢`)

HTML-Canvas

Quadratische Kurven verwenden

Bezierkurven verwenden

Verwenden der Pfad-API

CSS-Version

Wie erstelle ich eine Träne in HTML?

Antworten:

SVG-Ansatz:

Grundlegender Randradius

Erweiterter Randradius

Alternativen

CSS-Version

SVG-Version

Der fragliche Tropfen:

Für IE 5-8 (VML)

TROPFEN: 💧 ( &#128167;)

SCHWARZER TROPFEN: 🌢 ( &#127778;)

HTML-Canvas

Quadratische Kurven verwenden

Bezierkurven verwenden

Verwenden der Pfad-API

CSS-Version

TROPFEN: 💧 ( `💧`)

SCHWARZER TROPFEN: 🌢 ( `🌢`)