223

Comment créer une forme comme celle-ci pour l'afficher sur une page Web?

Je ne veux pas utiliser d' images car elles deviendraient floues à l'échelle

Forme de larme que je dois faire avec HTML, CSS ou SVG

J'ai essayé avec 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>

Développer l'extrait

Cela s'est avéré vraiment foutu.

Et puis j'ai essayé avec SVG:

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

Développer l'extrait

Il a pris la forme, mais la partie inférieure n'était pas incurvée.

Existe-t-il un moyen de créer cette forme afin qu'elle puisse être utilisée dans une page HTML?

— Persijn
source

12

"Je ne veux pas utiliser d'images car elles deviendraient floues lors de la mise à l'échelle", pourquoi redimensionnez-vous l'image? Ils ne deviennent pas flous si vous utilisez [srcset]ou l' <picture>élément. Mieux encore, il suffit de <img src="tear.svg" alt="Teardrop"/>

— créer

32

@zzzzBov: recommandez-vous vraiment l' pictureélément? Pas de support pour IE, pas de support pour les premières versions de Chrome, pas de support pour safari. Dois-je continuer?

— jbutler483

9

@zzzzBov. why are you scaling the image?Eh bien, l'image peut apparaître floue sans que le développeur la redimensionne. Tout ce dont vous avez besoin pour cela est un zoom de navigateur. Dans mon cas, j'ai un écran HighDPI et beaucoup d'images floues. Donc, si vous pouvez éviter les images en utilisant SVG, allez-y.

— Nolonar

63

Unicode résout tout ... U + 1F4A7

— Thomas

21

@Thomas Je vois un carré: / i.stack.imgur.com/8fXMf.png

— user000001

327

Approche SVG:

Vous pouvez facilement obtenir la double courbe avec un SVG en ligne et l' <path/>élément au lieu du<polygon/> élément qui ne permet pas les formes courbes.

L'exemple suivant utilise l' <path/>élément avec:

2 commandes de courbe de Bézier quadratique pour les 2 courbes supérieures (lignes commençant par Q)
1 commande d'arc pour le grand bas (ligne commençant par 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>

Développer l'extrait

SVG est un excellent outil pour créer ce type de formes avec des courbes doubles. Vous pouvez consulter cet article sur les courbes doubles avec une comparaison SVG / CSS. Certains des avantages de l'utilisation de SVG dans ce cas sont:

Contrôle de courbe
Contrôle de remplissage (opacité, couleur)
Contrôle des traits (largeur, opacité, couleur)
Quantité de code
Il est temps de construire et de maintenir la forme
Évolutif
Pas de requête HTTP (si utilisé en ligne comme dans l'exemple)

La prise en charge du navigateur pour le SVG en ligne remonte à Internet Explorer 9. Voir canIuse pour plus d'informations.

— web-tiki
source

il peut se réduire à: <svg width="100%" height="100%" viewBox="0 0 8 8" /> <path d="M4 1L3 4A1.2 2 0 1 0 5 4"/> </svg> ... cela remplira la zone que vous lui donnez, il peut donc faire des gouttes de pluie "grasses" ou "maigres" ... changer en hauteur / largeur fixe si nécessaire

— technosaurus

1

@technosaurus le problème avec la réduction du nombre de commandes dans l' d="..."attribut est que vous n'avez plus la double courbe en haut de la goutte.

— web-tiki

10

+1 parce que vous devez utiliser SVG pour cela, pas CSS. Les fonctionnalités CSS dont vous auriez besoin pour y parvenir ont à peu près la même prise en charge du navigateur que SVG, il n'y a donc aucun avantage pour CSS à cet égard. CSS peut faire des formes, mais ce n'est pas pour cela qu'il est conçu; n'essayez pas d'enfoncer un clou avec un tournevis juste pour être intelligent lorsque vous pouvez le faire aussi bien avec un outil conçu pour le travail.

— Simba

6

Encore mieux: créez un fichier SVG et utilisez-le <img />dans le document hypertexte.

— Andreas Rejbrand

@AndreasRejbrand qui peut être une bonne idée selon le projet mais il ajoute une requête HTTP que OP semble vouloir éviter.

— web-tiki

136

Rayon de bordure de base

Vous pouvez le faire dans CSS relativement facilement en utilisant border-radius 'et les transformations. Votre CSS était juste un peu sorti.

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

Développer l'extrait

Rayon de bordure avancé

Ce sera très similaire à ci-dessus mais lui donne un peu plus de forme.

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

Développer l'extrait

— Stewartside
source

4

@zzzzBov Je ne comprends pas vraiment comment c'est le mauvais outil, OP a demandé une solution CSS ou SVG et j'ai trouvé une solution CSS qui correspond le mieux à la description. Son léger et facile à modifier.

— Stewartside

12

@zzzzBov L'utilisation de CSS pour les images et les sprites est une utilisation courante. C'est un morceau de code très minimal pour générer une "Image" générique. Je pense que c'est approprié car il est utilisable dans le cadre des questions spécifiées pour être utilisable sur une page Web.

— Stewartside

13

@zzzzBov: CSS est parfaitement adapté aux formes. Qui peut dire à quoi sert une telle forme? sémantiquement une image - OP a clairement indiqué qu'il ne souhaite pas utiliser une image, sinon pourquoi une telle question serait-elle posée?

— jbutler483

46

@ jbutler483, "CSS est parfaitement adapté aux formes" non, c'est affreux. Ce n'est pas parce que vous le pouvez que vous le devriez . Il introduit toutes sortes de déchets dans le balisage et est un gâchis fastidieux à entretenir. Les images sont beaucoup plus simples à gérer car elles sont facilement séparées dans leur propre fichier autonome individuel.

— zzzzBov

19

`` Des ordures dans le balisage '' se produisent lorsque vous utilisez le bootstrap ou des icônes impressionnantes de police. Sérieusement, je pense que vous allez un peu trop haut pour ce genre de choses quand (bien évidemment) cela peut être réalisé en utilisant une déclaration de rayon de frontière. Mais foin, qui vous dira de ne pas utiliser d'images?

— jbutler483

88

Votre principal problème avec votre code CSS était:

Vous avez utilisé une hauteur différente de la largeur
Vous n'avez pas fait pivoter la bonne taille d'angle

Ainsi, en «corrigeant» ces problèmes, vous généreriez:

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

Développer l'extrait

Veuillez également noter que pour économiser sur la longueur CSS, vous pouvez réécrire vos propriétés border-radius dans:

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

cela pourrait être amélioré avec des pseudo-éléments comme indiqué dans ce violon

Alternatives

J'ai trouvé cela par Vinay Challuru sur codepen.

Veuillez noter qu'avec la logique ici, j'ai pu créer le SVG pour presque toutes les formes de construction possibles / etc. Par exemple, une sortie rapide était:

Afficher l'extrait de code

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

Développer l'extrait

Il utilise un SVG et vous permet de modifier la forme de plusieurs façons, ayant la possibilité de modifier sa forme pour le résultat souhaité:

Afficher l'extrait de code

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>

Développer l'extrait

Avertissement Je n'ai pas écrit le stylo ci-dessus, je l'ai uniquement obtenu.

Version CSS

Bien que cela soit loin d'être terminé, vous pouvez également générer cette forme à l'aide de CSS.

Afficher l'extrait de code

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

Développer l'extrait

Version SVG

Je dois savoir que SVG devrait être au sommet de cette réponse, cependant, j'aime un défi et voici donc une tentative avec 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>

Développer l'extrait

En modifiant les pathvaleurs, vous seriez en mesure de modifier la forme de votre conception de larme.

— jbutler483
source

10

Tout cela semble très ... verbeux. La solution js est particulièrement absurde.

— egid

4

@egid: J'ai indiqué dans ma réponse que je n'avais pas créé la version js. Notez également que la version js vous permet de modifier la forme au moment de l'exécution

— jbutler483

55

IMO cette forme nécessite une courbe lisse à beziers pour assurer la continuité de la courbe.

La goutte en question:

Pour la goutte en question,

les courbes lisses ne peuvent pas être utilisées, car les points de contrôle ne seront pas de même longueur. Mais nous devons encore faire en sorte que les points de contrôle se situent exactement à l'opposé (180 degrés) des points de contrôle précédents, pour assurer la continuité complète de la courbe. L'image ci-dessous illustre ce point:

entrez la description de l'image ici
Remarque : les courbes rouge et bleue sont deux courbes quadratiques différentes.

stroke-linejoin="miter", pour la partie supérieure pointue.
Comme cette forme n'utilise que des ccommandes successives , nous pouvons l'omettre.

Voici l'extrait 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>

Développer l'extrait

TBH cependant , les courbes de réponse acceptées ne sont pas tout à fait continues.

Pour IE 5-8 (VML)

Fonctionne uniquement dans IE 5-8. VML utilise des commandes différentes de SVG . Par exemple. il utilise v pour les beziers cubiques relatifs .

Remarque: Cet extrait ne s'exécutera pas également dans IE 5-8. Vous devez créer un fichier html et l'exécuter directement dans le navigateur.

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

"Les courbes lisses ne peuvent pas être utilisées, car les points de contrôle ne seront pas de même longueur." "Lisser" ne signifie-t-il pas simplement que les poignées tangentes (points de contrôle) reposent sur une ligne droite? Pourquoi doivent-ils être de la même longueur?

— Niccolo M.

2

@NiccoloM. En svg, une courbe lisse (commandes T et S) signifie que la poignée est symétriquement opposée, ainsi qu'égale à la longueur de la poignée précédente . En langage normal, une courbe lisse peut signifier différentes longueurs de poignée, mais en svg, la longueur est également égale à la poignée de courbes précédente :)

— Max Payne

42

Ou si la police de vos lecteurs la prend en charge, utilisez les caractères Unicode

GOUTTELETTES: 💧 (`💧` )

ou

GOUTTELETE NOIRE: 🌢 (`🌢` )

Échelle en conséquence!

— Gnubie
source

Vous pouvez l'utiliser avec @ font-face, mais vous avez ensuite un fichier de police à conserver au bon endroit et ainsi de suite.

— 1934286

3

SVG et un symbole Unicode dédié comme celui-ci sont bons. CSS pour cela est mauvais. PNG est correct, mais pas parfait car il s'agit de graphiques raster. JPG est extrêmement mauvais, si mauvais que j'aurais des cauchemars si je le voyais.

— Andreas Rejbrand

@AndreasRejbrand un PNG 20x20 serait pire qu'un JPG 200x200. Et, avec la même taille, un JPG non compressé équivaut à un PNG. Ils sont tous les deux raster et souffrent des mêmes problèmes.

— nico

@nico: En théorie, oui, vous pouvez utiliser JPG sans compression. Mais Internet regorge de catastrophes comme celle-ci: en.wikipedia.org/wiki/Atomic_number#/media/…

— Andreas Rejbrand

28

J'utiliserais personnellement un SVG pour cela. Vous pouvez créer des SVG dans la plupart des logiciels de graphiques vectoriels. Je recommanderais:

Inkscape
Esquisser
Adobe Illustrator

J'en ai créé un ci-dessous qui est un tracé de votre forme dans 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>

Développer l'extrait

— Djave
source

27

Toile HTML

C'est une option découverte jusqu'ici dans ce fil. Les commandes utilisées pour les dessins Canvas sont très similaires à SVG (et web-tiki mérite les crédits pour l'idée de base utilisée dans cette réponse).

La forme en question peut être créée à l'aide des propres commandes de courbe du canevas (Quadratique ou Bézier) ou de l'API Path. La réponse contient des exemples pour les trois méthodes.

La prise en charge du navigateur pour Canvas est assez bonne .

Utilisation de courbes quadratiques

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>

Développer l'extrait

Voici une version avancée avec remplissage dégradé et ombres. J'ai également inclus un hovereffet sur la forme pour illustrer un inconvénient de Canvas par rapport à SVG. Le canevas est basé sur un raster (pixel) et par conséquent, il semble flou / pixellisé lorsqu'il est mis à l'échelle au-delà d'un certain point. La seule solution à cela serait de repeindre la forme à chaque redimensionnement du navigateur, ce qui est une surcharge.

Afficher l'extrait de code

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>

Développer l'extrait

Utilisation des courbes de Bézier

Afficher l'extrait de code

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>

Développer l'extrait

Utilisation de l'API Path

Afficher l'extrait de code

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>

Développer l'extrait

^{Remarque: Comme mentionné dans ma réponse ici , l'API Path n'est pas encore prise en charge par IE et Safari.}

Lectures complémentaires:

— Harry
source

Je ne vois pas comment svg est toujours une meilleure option. c'est certainement une meilleure option dans de nombreux cas comme celui-ci. Mais la toile a ses propres avantages. Bonne réponse. à partir de votre réponse, je peux comprendre que c'est certainement beaucoup plus facile d'utiliser SVG!

— Max Payne

Ouais @TimKrul, c'est plus facile à écrire / utiliser SVG. Canvas a ses propres avantages, mais d'après ce que je lis, il n'est pas trop avantageux d'utiliser pour des formes de logo simples, principalement parce qu'il est basé sur un raster contrairement à SVG.

— Harry

25

J'ai également trouvé cela sur Codepen créé par l'utilisateur Ana Tudor en utilisant CSS et le box-shadowstyle et les équations paramétriques. Très simple, très peu de code. Et de nombreux navigateurs prennent en charge le style 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>

Développer l'extrait

— Luke Shimkus
source

7

Cela ne ressemble cependant pas au type de larme demandé.

— doppelgreener

20

Version CSS

Comme il y a pas mal de réponses ici, j'ai pensé pourquoi ne pas y ajouter une autre méthode. Cela utilise à la fois HTML et CSS pour créer la larme.

Cela vous permettra de changer la couleur de la bordure et de l'arrière-plan de la larme et de redimensionner la partie supérieure de celle-ci.

En utilisant un seul, divnous pouvons créer un cercle avec borderet border-radius. Ensuite, en utilisant des pseudo-éléments ( :before& :after), nous créons un triangle CSS ^{plus ici} , cela agira comme la pointe de la larme. En utilisant le :beforecomme bordure, nous plaçons :aftersur le dessus avec une taille plus petite et la couleur d'arrière-plan souhaitée.

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>

Développer l'extrait

Voici une démo de la larme avec une couleur de fond

Afficher l'extrait de code

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>

Développer l'extrait

C'est aussi simple que de mettre une couleur d'arrière-plan sur la couleur divet de la changer :after bottom-border. Pour modifier la bordure, vous devrez également changer divla couleur de la bordure et la :beforecouleur d'arrière - plan.

— Rouge
source

Ruddy le stylo manque une valeur de couleur d'arrière-plan.

— Persijn

2

@Persijn Harry a dit quelque chose dans le chat et je le regardais sur ce stylo en oubliant qu'il enregistre automatiquement de temps en temps. Haha, je vais le remettre comme il était. Terminé.

— Ruddy

17

Il est assez facile de le faire avec SVG en utilisant simplement une ressource de conversion d'image telle que http://image.online-convert.com/convert-to-svg , qui a été utilisée pour créer ce qui suit:

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

Développer l'extrait

— Anonyme
source

9

@Persijn pourquoi continuez-vous de demander une copie d'un éditeur? Svg est svg, vous pouvez utiliser n'importe quel outil pour en créer un.

— Abhinav Gauniyal

2

@AbhinavGauniyal: les "éditeurs" comme vous voulez les appeler, ajoutent du "fluff" aux déclarations. Par exemple, 300.000000ptet des métadonnées qui ne sont pas vraiment nécessaires

— jbutler483

12

@Persijn que voulez-vous dire par la main / codé. Quelqu'un vient de faire / illustrer / coder à la main pour simplement faciliter leurs tâches de codage, et cela produit toujours la même chose. Là encore, lorsque vous utilisez svg dans le navigateur, pourquoi ne pas le coder vous-même à l'aide du langage d'assemblage? et pourquoi s'arrêter à l'assemblage, le coder à la main / à l'aide de fils ou le dessiner vous-même. Ce n'est pas une raison que j'attendais.

— Abhinav Gauniyal

2

@ jbutler483 oui et ils peuvent être supprimés. Il existe de nombreux outils qui le font pour vous, en voici un pour vous github.com/svg/svgo

— Abhinav Gauniyal

6

@persijn cette réponse fournit les chemins svg nécessaires. je n'ai vraiment aucune idée de votre objection.

— user428517

14

Si vous choisissez d'utiliser SVG, vous devriez lire sur les chemins. Je suggère également un éditeur 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>

Développer l'extrait

— Brennen Sprimont
source

1

Pourquoi voudriez-vous utiliser une ligne à l'intérieur d'une balise defs? Et ne pouvez-vous pas faire cette forme dans un chemin, pas 3 + un rect?

— Persijn

6

Voici quatre formes de larmes SVG progressivement plus 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>

Développer l'extrait

— Andrew Willems
source

Comment créer une larme en HTML?

Approche SVG:

Rayon de bordure de base

Rayon de bordure avancé

Alternatives

Version CSS

Version SVG

La goutte en question:

Pour IE 5-8 (VML)

GOUTTELETTES: 💧 (&#128167; )

GOUTTELETE NOIRE: 🌢 (&#127778; )

Toile HTML

Utilisation de courbes quadratiques

Utilisation des courbes de Bézier

Utilisation de l'API Path

Version CSS

GOUTTELETTES: 💧 (`💧` )

GOUTTELETE NOIRE: 🌢 (`🌢` )