223

Bir web sayfasında görüntülemek için böyle bir şekli nasıl oluştururum?

Ölçeklendirmede bulanıklaşacakları için görüntüleri kullanmak istemiyorum

HTML, CSS veya SVG ile yapmam gereken gözyaşı şekli

CSS ile denedim :

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

Snippet'i genişlet

Bu gerçekten berbat oldu.

Sonra SVG ile denedim:

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

Snippet'i genişlet

Şekli elde etti, ancak alt kısım kavisli değildi.

Bir HTML sayfasında kullanılabilmesi için bu şekli oluşturmanın bir yolu var mı?

— Persijn
kaynak

12

"Görüntüleri ölçeklendirmede bulanıklaşacaklarından kullanmak istemiyorum", neden görüntüyü ölçeklendiriyorsunuz? Kullanırsanız [srcset]veya <picture>öğeyi bulanıklaştırmazlar . Daha da iyisi, sadece bir svg resmine bağlantı:<img src="tear.svg" alt="Teardrop"/>

— zzzzBov

32

@zzzzBov: Öğeyi gerçekten tavsiye ediyor picturemusunuz? Hiçbir destek IE için hiçbir destek Chrome, erken sürümleri için hiçbir destek safari. Devam etmeli miyim?

— jbutler483

9

@zzzzBov. why are you scaling the image?Görüntü, geliştirici ölçeklendirilmeden bulanık görünebilir. Bunun için tek ihtiyacınız olan yakınlaştırılan bir tarayıcı. Benim durumumda bir HighDPI ekranım ve çok bulanık görüntülerim var. Yani, evet, SVG kullanarak görüntüleri önleyebiliyorsanız, devam edin.

— Nolonar

63

Unicode hepsini çözer ... U + 1F4A7

— Thomas

21

@Thomas Bir kare görüyorum: / i.stack.imgur.com/8fXMf.png

— user000001

327

SVG yaklaşımı:

Çift eğriyi satır içi SVG ve <path/>öğe yerine elemanla kolayca elde edebilirsiniz .<polygon/>Eğri şekillere izin vermeyen .

Aşağıdaki örnek şu <path/>öğeyi kullanır :

2 üst eğri için 2 karesel bezier eğrisi komutuQ )
Büyük dip için 1 ark komutu (ile başlayan satır 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>

Snippet'i genişlet

SVG, bu tür şekilleri çift eğrilerle yapmak için harika bir araçtır. SVG / CSS karşılaştırması ile bu eğri hakkında bu gönderiyi kontrol edebilirsiniz . Bu durumda SVG kullanmanın avantajlarından bazıları şunlardır:

Eğri kontrolü
Dolgu kontrolü (opaklık, renk)
Strok kontrolü (genişlik, opaklık, renk)
Kod miktarı
Şekli oluşturma ve bakım zamanı
Ölçeklenebilir
HTTP isteği yok (örnekteki gibi satır içi kullanılırsa)

Satır içi SVG için tarayıcı desteği Internet Explorer 9'a geri döner. Daha fazla bilgi için canIuse'a bakın .

— web tiki
kaynak

azaltabilir: <svg width="100%" height="100%" viewBox="0 0 8 8" /> <path d="M4 1L3 4A1.2 2 0 1 0 5 4"/> </svg> ... Bu, verdiğiniz alanı dolduracaktır, bu nedenle "şişman" veya "sıska" yağmur damlaları yapabilir ... gerekirse sabit yükseklik / genişliğe değiştirin

— technosaurus

1

@technosaurus, d="..."öznitelikteki komut sayısını azaltmayla ilgili sorun, artık damlanın üstünde çift eğriye sahip olmamanızdır.

— web-tiki

10

+1 çünkü CSS yerine SVG kullanmalısınız. Elde etmeniz gereken CSS özellikleri SVG ile aynı tarayıcı desteğine sahiptir, bu nedenle bu puanda CSS için bir avantaj yoktur. CSS şekiller yapabilir, ancak bunun için tasarlanmamıştır; sadece iş için tasarlanmış bir aletle yapabildiğiniz zaman akıllı olmak için bir tornavida ile çivi çakmaya çalışmayın.

— Simba

6

Daha da iyisi: bir SVG dosyası oluşturun ve <img />köprü metni belgesinde kullanın .

— Andreas Rejbrand

@AndreasRejbrand projeye bağlı olarak iyi bir fikir olabilir, ancak OP'nin kaçınmak istediği bir HTTP isteği ekler.

— web-tiki

136

Temel Sınır Yarıçapı

Bunu, sınır yarıçapı ve dönüşümlerini kullanarak CSS içinde nispeten kolayca yapabilirsiniz. CSS'niz biraz dışarı çıktı.

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

Snippet'i genişlet

Gelişmiş Sınır Yarıçapı

Bu yukarıdakine çok benzeyecek, ancak biraz daha şekil verecek.

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

Snippet'i genişlet

— Stewartside
kaynak

4

@zzzzBov Nasıl yanlış bir araç olduğunu tam olarak anlamıyorum, OP bir CSS veya SVG çözümü istedi ve mümkün olduğunca açıklamaya uyan bir CSS çözümü buldum. Hafif ve kolay değiştirilebilir.

— Stewartside

12

@zzzzBov Resimler ve spritelar için CSS kullanmak yaygın bir uygulamadır. Genel bir "Görüntü" oluşturmak için çok küçük bir kod parçasıdır. Bunun uygun olduğuna inanıyorum çünkü bir web sayfasında kullanılabilir olmanın spesifikasyonları içinde kullanılabilir.

— Stewartside

13

@zzzzBov: CSS şekiller için gayet iyi. Bu şeklin ne için kullanıldığını kim söyleyecek? anlamsal olarak bir görüntü - OP, bir görüntü kullanmak istemediklerini açıkça belirtmiştir, aksi halde neden başka bir soru sorulur?

— jbutler483

46

@ jbutler483, "CSS şekiller için gayet iyi" hayır, korkunç. Sadece çünkü edebilirsiniz sen anlamına gelmez gerekir . İşaretlemede her türlü çöpü tanıtır ve korumak için sıkıcı bir karışıklıktır. Kendi bağımsız müstakil dosyalarına kolayca ayrılabildiklerinden, görüntülerin bakımı çok daha kolaydır.

— zzzzBov

19

Önyükleme veya font müthiş simgeleri kullandığınızda 'işaretlemedeki çöp' oluşur. Cidden, bunun bir sınır yarıçapı bildirimi kullanılarak elde edilebildiğinde, bunun beğenileri için biraz yukarı çıkacağınızı düşünüyorum. Ama hay, kim görüntüleri kullanmamanızı söyleyecek?

— jbutler483

88

CSS kodunuzla ilgili ana sorununuz:

Genişlikten farklı bir yükseklik kullandınız
Doğru açı boyutunu döndürmediniz

Yani, bu sorunları 'düzelterek' şunu üreteceksiniz:

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

Snippet'i genişlet

Ayrıca, CSS uzunluğundan tasarruf etmek için sınır yarıçapı özelliklerinizi yeniden yazabileceğinizi unutmayın:

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

bu , bu kemanda gösterildiği gibi sahte elemanlarla geliştirilebilir

Alternatifler

Bulduğum bu tarafından Vinay Challuru codepen üzerinde.

Buradaki mantıkla, neredeyse her olası yapı şekline / vb. SVG oluşturabildiğimi lütfen unutmayın . Örneğin, hızlı bir çıktı:

Kod snippet'ini göster

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

Snippet'i genişlet

Bir SVG kullanıyor ve şeklini istenen şekilde değiştirebilme yeteneğine sahip olarak şekli birden çok şekilde değiştirmenize izin veriyor:

Kod snippet'ini göster

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>

Snippet'i genişlet

Feragat Yukarıdaki kalemi yazmadım, sadece tedarik ettim.

CSS Sürümü

Bu tamamlanmaktan uzak olsa da, CSS kullanarak bu şekli de oluşturabilirsiniz.

Kod snippet'ini göster

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

Snippet'i genişlet

SVG Sürümü

SVG'nin bu cevabın başında olması gerektiğini bilmeliyim, ancak bir meydan okumayı seviyorum ve işte SVG ile bir girişim.

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>

Snippet'i genişlet

Değiştirilmesi pathdeğerlerini, kendi gözyaşı tasarım şeklini değiştirmek mümkün olacaktır.

— jbutler483
kaynak

10

Bunların hepsi çok ... ayrıntılı görünüyor. Js çözeltisi özellikle saçmadır.

— egid

4

@egid: Cevabımda js sürümünü oluşturmadığımı belirtmiştim. Ayrıca js sürümünün çalışma zamanında şekli değiştirmenize izin verdiğini unutmayın

— jbutler483

55

IMO bu şekil düzgün eğri gerektirir sürekliliğini sağlamak .

Söz konusu Damla:

Söz konusu düşüş için,

kontrol noktaları aynı uzunlukta olmayacağından düzgün eğriler kullanılamaz. Ancak , eğrinin tam sürekliliğini sağlamak için kontrol noktalarını önceki kontrol noktalarına tam tersi (180 derece) yapmamız gerekir. Aşağıda verilen resim bu noktayı göstermektedir:

resim açıklamasını buraya girin
Not : Kırmızı ve mavi eğriler iki farklı kuadratik eğridir.

stroke-linejoin="miter", sivri üst kısım için.
Bu şekil yalnızca ardışık ckomutlar kullandığından onu atlayabiliriz.

İşte son pasaj:

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

Snippet'i genişlet

Ancak TBH , kabul edilen cevapların eğrileri oldukça sürekli değildir.

IE 5-8 için (VML)

Yalnızca IE 5-8'de çalışır. VML farklı komutlar kullanır SVG . Örneğin. göreceli kübik bezleyiciler için v kullanır .

Not: Bu snippet IE 5-8'de de çalışmaz. Bir html dosyası oluşturmanız ve doğrudan tarayıcıda çalıştırmanız gerekir.

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

"kontrol noktaları aynı uzunlukta olmayacağından düzgün eğriler kullanılamaz." "Pürüzsüz" sadece teğet tutamaçların (kontrol noktaları) düz bir çizgide oturduğu anlamına gelmez mi? Neden aynı uzunlukta olmaları gerekiyor?

— Niccolo

2

@NiccoloM. Svg'de, düzgün eğri (T ve S komutları), tutamacın simetrik olarak zıt olduğu ve önceki tutamacın uzunluğuna eşit olduğu anlamına gelir . Normal dilde, düzgün eğri farklı sap uzunlukları anlamına gelebilir, ancak svg'de, uzunluk da önceki eğriler sapına eşittir :)

— Max Payne

42

Veya görüntüleyenlerinizin yazı tipi destekliyorsa, Unicode karakterleri kullanın

DROPLET: 💧 (`💧` )

veya

SİYAH DAMLA: 🌢 (`🌢` )

Buna göre ölçeklendirin!

— Gnubie
kaynak

Bunu @ font-face ile kullanabilirsiniz, ancak daha sonra doğru yerde tutmak için bir yazı tipi dosyanız vardır.

— 1934286

3

SVG ve bunun gibi özel bir Unicode sembolü iyidir. Bunun için CSS kötü. PNG iyi, ancak raster grafikler olduğu için mükemmel değil. JPG son derece kötü, o kadar kötü ki, görürsem kabus görürüm.

— Andreas Rejbrand

20x20 PNG, 200x200 JPG'den daha kötü ölçeklenirdi. Aynı boyutta, sıkıştırılmamış bir JPG bir PNG'ye eşdeğerdir. Her ikisi de raster ve aynı sorunlardan muzdarip.

— nico

@nico: Teorik olarak, evet, JPG'yi sıfır sıkıştırma ile kullanabilirsiniz. Ancak İnternet böyle bir felaketle doludur: en.wikipedia.org/wiki/Atomic_number#/media/…

— Andreas Rejbrand

28

Şahsen bunun için bir SVG kullanırım. Çoğu vektör grafik yazılımında SVG'ler oluşturabilirsiniz. Ben tavsiye ederim:

Inkscape
kroki
Adobe Illustrator

Aşağıda Illustrator'da şeklin izini süren bir tane yaptım.

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

Snippet'i genişlet

— Djave
kaynak

27

HTML Tuval

Bu, şimdiye kadar bu iş parçacığında ortaya çıkarılan bir seçenektir. Tuval çizimlerinde kullanılan komutlar SVG'ye çok benzer (ve web-tiki bu cevapta kullanılan temel fikir için kredileri hak ediyor).

Söz konusu şekil kanvasın kendi eğri komutları (Karesel veya Bezier) veya Yol API'si kullanılarak oluşturulabilir. Cevap, üç yöntemin de örneklerini içermektedir.

Canvas için tarayıcı desteği oldukça iyi .

Karesel Eğrileri Kullanma

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>

Snippet'i genişlet

Aşağıda, degrade dolgusu ve gölgeleri olan gelişmiş bir sürüm bulunmaktadır. Ayrıca hover, SVG ile karşılaştırıldığında Canvas'ın bir dezavantajını gösteren şekil üzerinde bir etki ekledim. Tuval raster (piksel) tabanlıdır ve bu nedenle belirli bir noktanın ötesine ölçeklendiğinde bulanık / pikselli görünür. Bunun tek çözümü, genel bir tarayıcı olan her tarayıcı boyutundaki şekli yeniden boyamak olacaktır.

Kod snippet'ini göster

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>

Snippet'i genişlet

Bezier Eğrilerini Kullanma

Kod snippet'ini göster

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>

Snippet'i genişlet

Yol API'sını kullanma

Kod snippet'ini göster

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>

Snippet'i genişlet

^{Not: Buradaki yanıtımda belirtildiği gibi , Path API henüz IE ve Safari tarafından desteklenmiyor.}

Daha fazla okuma:

— Harry
kaynak

Ben her zaman svg daha iyi bir seçenek nasıl görmüyorum. bunun gibi birçok durumda kesinlikle daha iyi bir seçenektir. Ancak tuvalin kendi artıları var. Güzel cevap. Cevabınızdan, SVG kullanmak kesinlikle çok daha kolay!

— Max Payne

Evet @ TimKrul, SVG'yi yazmak / kullanmak daha kolay. Tuvalin kendi artıları vardır, ancak okuduğum her şeyden önce, şekiller gibi basit bir logo için kullanılırken çok avantajlı değildir, çünkü SVG'den farklı olarak raster tabanlıdır.

— Harry

25

Ben de buldum bu üzerinde Codepen kullanıcı tarafından yapılan Ana Tudor CSS ve kullanma box-shadowtarzı ve parametrik denklemler. Çok basit, çok az kod. Ve birçok tarayıcı CSS3 Kutu-gölge stilini destekler:

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>

Snippet'i genişlet

— Luke Shimkus
kaynak

7

Ancak bu, istenen gözyaşı türüne benzemez.

— doppelgreener

20

CSS Sürümü

Burada oldukça az cevap olduğu için neden başka bir yöntemle eklemediğimizi düşündüm. Bu, hem kullandığı HTML ve CSS gözyaşı oluşturun.

Bu, gözyaşı kenarlığının rengini ve arka planını değiştirmenize ve üst kısmını yeniden boyutlandırmanıza olanak tanır.

Tekli kullanarak ve divile bir daire oluşturabiliriz . Sonra sözde elemanlar ( & ) kullanarak ^burada bir CSS üçgeni ^daha yaratırız , bu gözyaşı damlasının ucu olarak işlev görür. Kullanılması verdiğimiz sınırına kadar küçük boyutta ve istenilen arka plan rengiyle üstünde.borderborder-radius:before:after :before:after

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>

Snippet'i genişlet

İşte arka plan rengi ile gözyaşı demosu

Kod snippet'ini göster

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>

Snippet'i genişlet

Bir arka plan rengini üzerine koymak divve :after bottom-borderrengi aynı şekilde değiştirmek kadar basittir . Kenarlığı değiştirmek için divkenarlık rengini ve :beforearka plan rengini de değiştirmeniz gerekir .

— kahrolası
kaynak

Kalemin kırmızı arka plan renk değeri eksik.

— Persijn

2

@Persijn Harry sohbette bir şey söyledi ve ben her zaman otomatik olarak kaydettiğini unutmayı unutmak için ona bakıyordum. Haha, olduğu gibi geri koyacağım. Bitti.

— Ruddy

17

Bunu, yalnızca aşağıdakileri oluşturmak için kullanılan http://image.online-convert.com/convert-to-svg gibi bir görüntü dönüştürme kaynağı kullanarak SVG ile yapmak oldukça kolaydır :

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

Snippet'i genişlet

— Anonim
kaynak

9

@Persijn neden bazı editörlerden kopyalandığını soruyorsun? Svg svg, hangi aracı oluşturmak istediğinizi kullanabilirsiniz.

— Abhinav Gauniyal

2

@AbhinavGauniyal: Onları istediğiniz gibi 'editörler', bildirimlere ekstra 'kabartmak' ekleyin. Örneğin 300.000000ptve gerçekten gerekli olmayan meta veriler

— jbutler483

12

@Persijn elle / kodlanmış ile ne demek istiyorsun. Birisi sadece kodlama görevlerini kolaylaştırmak için sadece / el / kodlu illustrator yaptı ve hala aynı şeyi üretiyor. Sonra tekrar svg'yi tarayıcıda kullanırken, neden montaj dilini kullanarak kendiniz kodlamıyorsunuz? ve neden montajda durun, kablolarla el / kodlayın veya sadece kendiniz çizin. Bu beklediğim bir sebep değil.

— Abhinav Gauniyal

2

@ jbutler483 evet ve onlar kesilebilir. Bunu sizin için yapan birçok araç var, işte sizin için bir tane github.com/svg/svgo

— Abhinav Gauniyal

6

@persijn bu cevap gereken svg yollarını sağlar. itirazının ne olduğuna dair hiçbir fikrim yok.

— user428517

14

SVG kullanmayı seçerseniz, yolları okumalısınız. Ayrıca bir SVG editörü öneririm.

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

Snippet'i genişlet

— Brennen Sprimont
kaynak

1

Neden defs etiketinin içinde bir satır kullanasınız? Ve bu şekli 3 + rect değil tek bir yoldan yapamaz mısın?

— Persijn

6

İşte aşamalı olarak daha basit dört SVG gözyaşı şekli:

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

Snippet'i genişlet

— Andrew Willems
kaynak

HTML'de nasıl bir gözyaşı oluştururum?

SVG yaklaşımı:

Temel Sınır Yarıçapı

Gelişmiş Sınır Yarıçapı

Alternatifler

CSS Sürümü

SVG Sürümü

Söz konusu Damla:

IE 5-8 için (VML)

DROPLET: 💧 (&#128167; )

SİYAH DAMLA: 🌢 (&#127778; )

HTML Tuval

Karesel Eğrileri Kullanma

Bezier Eğrilerini Kullanma

Yol API'sını kullanma

CSS Sürümü

DROPLET: 💧 (`💧` )

SİYAH DAMLA: 🌢 (`🌢` )