222

Jak utworzyć taki kształt, aby wyświetlał się na stronie internetowej?

Nie chcę używać obrazów, ponieważ byłyby rozmyte podczas skalowania

Kształt łezki muszę wykonać za pomocą HTML, CSS lub SVG

Próbowałem z 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>

Rozwiń fragment kodu

To się naprawdę spieprzyło.

A potem spróbowałem z SVG:

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

Rozwiń fragment kodu

Przybierał kształt, ale dolna część nie była zakrzywiona.

Czy istnieje sposób na utworzenie tego kształtu, aby można go było używać na stronie HTML?

html css svg css-shapes Persijn
źródło

12

„Nie chcę używać obrazów, ponieważ byłyby rozmyte podczas skalowania”, dlaczego skalujesz obraz? Nie rozmazują się, jeśli używasz [srcset]lub <picture>elementu. Jeszcze lepiej, po prostu link do obrazu <img src="tear.svg" alt="Teardrop"/>

SVG

32

@zzzzBov: Czy naprawdę polecasz ten pictureelement? Brak obsługi IE, brak obsługi wczesnych wersji Chrome, brak wsparcia dla safari. Powinienem kontynuować?

jbutler483

9

@zzzzBov. why are you scaling the image?Cóż, obraz może wydawać się rozmazany bez skalowania go przez programistę. Wszystko, czego potrzebujesz, to powiększenie przeglądarki. W moim przypadku mam ekran HighDPI i mnóstwo rozmytych obrazów. Tak, jeśli możesz uniknąć obrazów za pomocą SVG, idź do niego.

Nolonar

63

Unicode rozwiązuje wszystko ... U + 1F4A7 💧

Thomas Weller

21

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

user000001

327

Podejście SVG:

Podwójną krzywą można łatwo osiągnąć za pomocą wbudowanego pliku SVG i <path/>elementu zamiast <polygon/>elementu, który nie pozwala na zakrzywione kształty.

W poniższym przykładzie użyto <path/>elementu z:

2 polecenia kwadratowej krzywej Beziera dla 2 górnych krzywych (linie rozpoczynające się od Q)
1 polecenie łuku dla dużego dolnego (linia rozpoczynająca się od 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>

Rozwiń fragment kodu

SVG jest doskonałym narzędziem do tworzenia tego rodzaju kształtów z podwójnymi krzywymi. Możesz sprawdzić ten post na temat podwójnych krzywych za pomocą porównania SVG / CSS. Niektóre zalety używania SVG w tym przypadku to:

Kontrola krzywej
Kontrola wypełnienia (krycie, kolor)
Kontrola obrysu (szerokość, krycie, kolor)
Ilość kodu
Czas na budowę i utrzymanie kształtu
Skalowalny
Brak żądania HTTP (jeśli jest używany inline jak w przykładzie)

Obsługa wbudowanych plików SVG wraca do przeglądarki Internet Explorer 9. Aby uzyskać więcej informacji, zobacz canIuse .

web-tiki
źródło

może zmniejszyć się do: <svg width="100%" height="100%" viewBox="0 0 8 8" /> <path d="M4 1L3 4A1.2 2 0 1 0 5 4"/> </svg> ... wypełni to obszar, który mu dasz, więc może sprawić, że „tłuste” lub „chude” krople deszczu ... zmienią się na stałą wysokość / szerokość, jeśli to konieczne

technosaurus

1

@ Technozaur problem ze zmniejszeniem liczby poleceń w tym d="..."atrybucie polega na tym, że nie masz już podwójnej krzywej na górze kropli.

web-tiki

10

+1, ponieważ powinieneś do tego użyć SVG, a nie CSS. Funkcje CSS, które należy osiągnąć, mają taką samą obsługę przeglądarki jak SVG, więc CSS nie ma przewagi nad tym wynikiem. CSS potrafi tworzyć kształty, ale nie do tego jest przeznaczony; nie próbuj wbijać gwoździa śrubokrętem tylko dlatego, że jesteś sprytny, kiedy możesz to zrobić równie dobrze za pomocą narzędzia zaprojektowanego do tego zadania.

Simba,

6

Jeszcze lepiej: utwórz plik SVG i użyj go <img />w dokumencie hipertekstowym.

Andreas Rejbrand,

@AndreasRejbrand, który może być dobrym pomysłem w zależności od projektu, ale dodaje żądanie HTTP, którego OP chce uniknąć.

web-tiki

135

Podstawowy promień granicy

Możesz to zrobić w CSS stosunkowo łatwo, używając promienia granicy i transformacji. Twój CSS był tylko trochę niedostępny.

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

Rozwiń fragment kodu

Zaawansowany promień obramowania

Będzie to bardzo podobne do powyższego, ale nadaje mu nieco więcej kształtu.

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

Rozwiń fragment kodu

Stewartside
źródło

4

@zzzzBov Nie do końca rozumiem, jak to jest złe narzędzie, OP poprosił o rozwiązanie CSS lub SVG i wymyśliłem rozwiązanie CSS, które najlepiej pasuje do opisu. Jest lekki i łatwy do modyfikacji.

Stewartside

12

@zzzzBov Często używa się CSS do obrazów i duszków. Jest to bardzo minimalny fragment kodu, aby wygenerować ogólny „obraz”. Uważam, że jest to właściwe, ponieważ jest użyteczne w ramach pytań dotyczących bycia użytecznym na stronie internetowej.

Stewartside

13

@zzzzBov: CSS doskonale nadaje się do kształtów. Kto powie, do czego służy taki kształt? semantycznie obraz - OP wyraźnie stwierdził, że nie chce używać obrazu, w przeciwnym razie dlaczego miałoby być zadawane takie pytanie?

jbutler483

46

@ jbutler483, „CSS doskonale nadaje się do kształtów” nie, to okropne. Tylko dlatego, że może nie znaczy, że powinniśmy . Wprowadza wszelkiego rodzaju śmieci do znaczników i jest żmudnym bałaganem do utrzymania. Obrazy są o wiele prostsze w utrzymaniu, ponieważ można je łatwo podzielić na osobne pliki.

zzzzBov

19

„Śmieci w znacznikach” występują, gdy używasz ładowania początkowego lub niesamowitych czcionek. Poważnie, myślę, że przesadzasz w takich przypadkach, gdy (całkiem oczywiste) można to osiągnąć za pomocą deklaracji promienia granicy. Ale siano, kto ci każe nie używać obrazów?

jbutler483

88

Twoim głównym problemem z kodem CSS było:

Użyłeś innej wysokości niż szerokości
Nie obróciłeś prawidłowego rozmiaru kąta

Tak więc, „naprawiając” te problemy, można wygenerować:

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

Rozwiń fragment kodu

Pamiętaj również, aby zaoszczędzić na długości CSS, możesz ponownie zapisać swoje właściwości promienia granicy do:

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

można to ulepszyć pseudoelementami, jak pokazano w tym skrzypce

Alternatywy

Znalazłem to przez Vinay Challuru na codepen.

Zauważ, że dzięki logice tutaj byłem w stanie stworzyć SVG do prawie każdego możliwego kształtu kompilacji / etc. Na przykład szybkie wyjście to:

Pokaż fragment kodu

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

Rozwiń fragment kodu

Korzysta z SVG i pozwala zmieniać kształt na wiele sposobów, mając możliwość zmiany kształtu do pożądanego rezultatu:

Pokaż fragment kodu

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>

Rozwiń fragment kodu

Oświadczenie Nie napisałem powyższego pióra, tylko go pozyskałem.

Wersja CSS

Chociaż nie jest to jeszcze ukończone, możesz również wygenerować ten kształt za pomocą CSS.

Pokaż fragment kodu

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

Rozwiń fragment kodu

Wersja SVG

Powinienem wiedzieć, że SVG powinien znajdować się na szczycie tej odpowiedzi, jednak lubię wyzwania, więc oto próba z 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>

Rozwiń fragment kodu

Zmieniając pathwartości, będziesz mógł zmienić kształt swojego projektu łezki.

jbutler483
źródło

10

Wszystko to wydaje się bardzo ... pełne. Rozwiązanie js jest szczególnie absurdalne.

np.

4

@egid: W odpowiedzi stwierdziłem, że nie stworzyłem wersji js. Pamiętaj też, że wersja js pozwala zmieniać kształt w czasie wykonywania

jbutler483

55

IMO ten kształt wymaga gładkiego zakrzywienia krzywej w stosunku do ramek, aby zapewnić ciągłość krzywej.

Spadek, o którym mowa:

W przypadku kropli, o której mowa,

nie można używać gładkich krzywych, ponieważ punkty kontrolne nie będą tej samej długości. Ale nadal musimy sprawić, aby punkty kontrolne leżały dokładnie przeciwnie (180 stopni) do poprzednich punktów kontrolnych, aby zapewnić pełną ciągłość krzywej Poniższy rysunek ilustruje ten punkt:

wprowadź opis zdjęcia tutaj
Uwaga : Krzywe czerwone i niebieskie to dwie różne krzywe kwadratowe.

stroke-linejoin="miter", dla spiczastej górnej części.
Ponieważ ten kształt używa tylko kolejnych cpoleceń, możemy go pominąć.

Oto ostatni fragment:

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

Rozwiń fragment kodu

TBH jednak , krzywe akceptowanych odpowiedzi nie są ciągłe.

Dla IE 5-8 (VML)

Działa tylko w IE 5-8. VML używa innych poleceń niż SVG . Na przykład. używa v dla względnych sześciennych Beziers .

Uwaga: ten fragment kodu również nie będzie działał w IE 5-8. Musisz utworzyć plik HTML i uruchomić go bezpośrednio w przeglądarce.

<!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
źródło

„nie można używać gładkich krzywych, ponieważ punkty kontrolne nie będą tej samej długości”. Czy „gładki” nie oznacza po prostu, że styczne uchwyty (punkty kontrolne) leżą na linii prostej? Dlaczego muszą być tej samej długości?

Niccolo M.,

2

@NiccoloM. W svg gładka krzywa (polecenia T i S) oznacza, że uchwyt jest symetrycznie przeciwny, a także równy długości poprzedniego uchwytu . W normalnym języku gładka krzywa może oznaczać różne długości uchwytów, ale w svg długość jest również równa poprzedniemu uchwytowi krzywych :)

Max Payne

42

Lub jeśli czcionka przeglądarki obsługuje tę czcionkę, użyj znaków Unicode

DROPLET: 💧 ( `💧`)

lub

CZARNA KROPKA: 🌢 ( `🌢`)

Skaluj odpowiednio!

Gnubie
źródło

Możesz użyć tego z @ font-face, ale wtedy masz plik czcionek, aby zachować odpowiednie miejsce i tak dalej.

1934286

3

SVG i taki dedykowany symbol Unicode są dobre. CSS do tego jest zły. PNG jest w porządku, ale nie jest idealny, ponieważ jest grafiką rastrową. JPG jest bardzo zły, tak zły, że dostałbym koszmary, gdybym to zobaczył.

Andreas Rejbrand

@AndreasRejbrand format PNG 20x20 byłby gorszy niż format JPG 200x200. I przy tym samym rozmiarze nieskompresowany plik JPG jest równoważny plikowi PNG. Oboje są rastrowi i cierpią z powodu tych samych problemów.

nico,

@nico: Teoretycznie tak, można używać JPG z zerową kompresją. Ale Internet jest pełen takich katastrof: en.wikipedia.org/wiki/Atomic_number#/media/…

Andreas Rejbrand

28

Osobiście użyłbym do tego SVG. Pliki SVG można tworzyć w większości programów do grafiki wektorowej. Poleciłbym:

Inkscape
Naszkicować
Adobe Illustrator

Zrobiłem jeden poniżej, który jest śledzeniem twojego kształtu w programie 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>

Rozwiń fragment kodu

Djave
źródło

27

HTML Canvas

Jest to opcja odkryta do tej pory w tym wątku. Polecenia używane do rysunków Canvas są bardzo podobne do SVG (a web-tiki zasługuje na uznanie za podstawowy pomysł użyty w tej odpowiedzi).

Kształt, o którym mowa, można utworzyć za pomocą poleceń własnej krzywej obszaru roboczego (Quadratic lub Bezier) lub interfejsu API ścieżki. Odpowiedź zawiera przykłady wszystkich trzech metod.

Obsługa przeglądarki Canvas jest całkiem dobra .

Korzystanie z krzywych kwadratowych

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>

Rozwiń fragment kodu

Poniżej znajduje się wersja zaawansowana z wypełnieniem gradientowym i cieniami. Uwzględniłem również hoverwpływ na kształt, aby zilustrować jedną wadę Canvas w porównaniu do SVG. Płótno jest oparte na rastrze (pikselach) i dlatego wyglądałoby na rozmazane / pikselowane, gdy skalowane jest poza określony punkt. Jedynym rozwiązaniem byłoby odmalowanie kształtu przy każdej zmianie rozmiaru przeglądarki, co jest narzutem.

Pokaż fragment kodu

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>

Rozwiń fragment kodu

Korzystanie z krzywych Beziera

Pokaż fragment kodu

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>

Rozwiń fragment kodu

Korzystanie ze ścieżki API

Pokaż fragment kodu

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>

Rozwiń fragment kodu

^{Uwaga: Jak wspomniano w mojej odpowiedzi tutaj , interfejs API ścieżki nie jest jeszcze obsługiwany przez IE i Safari.}

Dalsza lektura:

Złupić
źródło

Nie wiem, jak zawsze svg jest lepszą opcją. z pewnością jest lepszą opcją w wielu przypadkach takich jak ten. Ale płótno ma swoje zalety. Niezła odpowiedź. z twojej odpowiedzi mogę to zrozumieć, z pewnością korzystanie z SVG jest o wiele łatwiejsze!

Max Payne,

Tak @TimKrul, łatwiej jest pisać / używać SVG. Płótno ma swoje zalety, ale z tego, co przeczytałem, nie jest zbyt korzystne, gdy używa się prostych kształtów podobnych do logo, ponieważ jest oparte na rastrze w przeciwieństwie do SVG.

Harry

25

Znalazłem to również na Codepen wykonanej przez użytkownika Ana Tudor przy użyciu CSS oraz box-shadowrównań stylu i parametrycznych. Bardzo prosty, bardzo mało kodu. Wiele przeglądarek obsługuje styl 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>

Rozwiń fragment kodu

Luke Shimkus
źródło

7

Nie przypomina to jednak rodzaju żądanej łzy.

doppelgreener

20

Wersja CSS

Ponieważ jest tu sporo odpowiedzi, pomyślałem, dlaczego nie dodać do niego innej metody. Wykorzystuje zarówno HTML, jak i CSS do utworzenia łezki.

Umożliwi to zmianę koloru obramowania i tła łzy, a także zmianę rozmiaru jej górnej części.

Za pomocą jednego divmożemy stworzyć okrąg za pomocą borderi border-radius. Następnie przy użyciu elementów pseudo ( :before& :after) możemy utworzyć trójkąt CSS ^{bardziej tutaj} , to będzie działać jako końcówki łzy. Używając :beforejako obramowania, umieszczamy :afterna górze mniejszy rozmiar i pożądany kolor tła.

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>

Rozwiń fragment kodu

Oto demonstracja łzy z kolorem tła

Pokaż fragment kodu

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>

Rozwiń fragment kodu

Jest to tak proste, jak nałożenie koloru tła na divi zmianę :after bottom-bordertego samego koloru. Aby zmienić ramkę, musisz również zmienić divkolor ramki i :beforekolor tła.

Rumiany
źródło

Rumiany długopis nie ma wartości koloru tła.

Persijn

2

@Persijn Harry powiedział coś na czacie, a ja patrzyłem na to pióro, zapominając, że co jakiś czas automatycznie zapisuje. Haha, przywrócę to do poprzedniego stanu. Gotowe.

Ruddy,

17

Jest to dość łatwe w SVG, po prostu za pomocą zasobu do konwersji obrazów, takiego jak http://image.online-convert.com/convert-to-svg , który został użyty do utworzenia następujących elementów:

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

Rozwiń fragment kodu

Anonimowy
źródło

9

@Persijn, dlaczego ciągle pytasz o kopię z jakiegoś edytora? Svg to svg, możesz użyć dowolnego narzędzia, które chcesz utworzyć.

Abhinav Gauniyal

2

@AbhinavGauniyal: „redaktorzy”, jak chcesz je nazywać, dodają dodatkowy „puch” do deklaracji. Na przykład 300.000000ptmetadane, które tak naprawdę nie są potrzebne

jbutler483

12

@Persijn, co masz na myśli ręcznie / kodowane. Ktoś właśnie wykonał / ręcznie / kodował ilustratora, aby po prostu ułatwić sobie zadania związane z kodowaniem, a on nadal wytwarza to samo. Z drugiej strony, kiedy używasz svg w przeglądarce, dlaczego nie ręcznie / kodujesz go za pomocą języka asemblera? i po co zatrzymywać się przy montażu, ręcznie / kodować za pomocą drutów lub po prostu narysować go samodzielnie. To nie jest powód, którego się spodziewałem.

Abhinav Gauniyal

2

@ jbutler483 tak i można je przyciąć. Jest wiele narzędzi, które robią to za Ciebie, oto jedno dla ciebie github.com/svg/svgo

Abhinav Gauniyal

6

@persijn ta odpowiedź zawiera niezbędne ścieżki SVG. naprawdę nie mam pojęcia, jaki jest twój sprzeciw.

user428517

14

Jeśli zdecydujesz się użyć SVG, powinieneś przeczytać na ścieżkach. Sugerowałbym również edytor 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>

Rozwiń fragment kodu

Brennen Sprimont
źródło

1

Dlaczego miałbyś używać linii wewnątrz znacznika defs? I nie możesz zrobić tego kształtu na jednej ścieżce, a nie na 3 + prostokącie?

Persijn

6

Oto cztery stopniowo prostsze kształty łez SVG:

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

Rozwiń fragment kodu

Andrew Willems
źródło

Jak utworzyć łzy w HTML?

Odpowiedzi:

Podejście SVG:

Podstawowy promień granicy

Zaawansowany promień obramowania

Alternatywy

Wersja CSS

Wersja SVG

Spadek, o którym mowa:

Dla IE 5-8 (VML)

DROPLET: 💧 ( `💧`)

CZARNA KROPKA: 🌢 ( `🌢`)

HTML Canvas

Korzystanie z krzywych kwadratowych

Korzystanie z krzywych Beziera

Korzystanie ze ścieżki API

Wersja CSS

Jak utworzyć łzy w HTML?

Odpowiedzi:

Podejście SVG:

Podstawowy promień granicy

Zaawansowany promień obramowania

Alternatywy

Wersja CSS

Wersja SVG

Spadek, o którym mowa:

Dla IE 5-8 (VML)

DROPLET: 💧 ( &#128167;)

CZARNA KROPKA: 🌢 ( &#127778;)

HTML Canvas

Korzystanie z krzywych kwadratowych

Korzystanie z krzywych Beziera

Korzystanie ze ścieżki API

Wersja CSS

DROPLET: 💧 ( `💧`)

CZARNA KROPKA: 🌢 ( `🌢`)