223

Bagaimana cara membuat bentuk seperti ini untuk ditampilkan di halaman web?

Saya tidak ingin menggunakan gambar karena gambar akan menjadi kabur pada penskalaan

Bentuk Teardrop yang perlu saya buat dengan HTML, CSS atau SVG

Saya mencoba dengan 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>

Luaskan cuplikan

Ternyata ternyata benar-benar kacau.

Dan kemudian saya mencoba dengan SVG:

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

Luaskan cuplikan

Itu memang mendapatkan bentuk, tetapi bagian bawah tidak melengkung.

Apakah ada cara untuk membuat bentuk ini sehingga dapat digunakan di halaman HTML?

html css svg css-shapes Persijn
sumber

12

"Saya tidak ingin menggunakan gambar karena mereka akan menjadi buram pada penskalaan", mengapa Anda menskala gambar? Mereka tidak menjadi buram jika Anda menggunakan [srcset]atau <picture>elemen. Lebih baik lagi, cukup tautkan ke gambar svg:<img src="tear.svg" alt="Teardrop"/>

zzzzBov

32

@zzzzBov: Apakah Anda benar-benar merekomendasikan pictureelemen? Tidak ada dukungan untuk IE, tidak ada dukungan untuk versi awal Chrome, tidak ada dukungan untuk safari. Haruskah saya melanjutkan?

jbutler483

9

@zzzzBov. why are you scaling the image?Nah, gambarnya bisa terlihat buram tanpa dev menskalakannya. Yang Anda butuhkan untuk itu adalah memperbesar browser. Dalam kasus saya, saya memiliki layar HighDPI dan banyak gambar buram. Jadi, ya, jika Anda dapat menghindari gambar menggunakan SVG, lakukan saja.

Nolonar

63

Unicode menyelesaikan semuanya ... U + 1F4A7 💧

Thomas Weller

21

@ Thomas Saya melihat kotak: / i.stack.imgur.com/8fXMf.png

user000001

327

Pendekatan SVG:

Anda dapat mencapai kurva ganda dengan mudah dengan SVG sebaris dan <path/>elemen, bukan <polygon/>elemen yang tidak memungkinkan bentuk melengkung.

Contoh berikut menggunakan <path/>elemen dengan:

2 perintah kurva bezier kuadratik untuk 2 kurva atas (garis dimulai dengan Q)
1 perintah busur untuk bagian bawah yang besar (baris dimulai dengan 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>

Luaskan cuplikan

SVG adalah alat yang hebat untuk membuat bentuk semacam ini dengan kurva ganda. Anda dapat memeriksa posting ini tentang kurva ganda dengan perbandingan SVG / CSS. Beberapa keuntungan menggunakan SVG dalam hal ini adalah:

Kontrol kurva
Kontrol isi (opacity, warna)
Kontrol goresan (lebar, opacity, warna)
Jumlah kode
Saatnya membangun dan mempertahankan bentuk
Dapat diukur
Tidak ada permintaan HTTP (jika digunakan sebaris seperti pada contoh)

Dukungan browser untuk inline SVG kembali ke Internet Explorer 9. Lihat canIuse untuk informasi lebih lanjut.

web-tiki
sumber

dapat mengurangi menjadi: <svg width="100%" height="100%" viewBox="0 0 8 8" /> <path d="M4 1L3 4A1.2 2 0 1 0 5 4"/> </svg> ... ini akan mengisi area yang Anda berikan, sehingga dapat membuat hujan "gemuk" atau "kurus" ... ubah ke ketinggian / lebar tetap jika perlu

technosaurus

1

@ technosaurus masalah dengan mengurangi jumlah perintah dalam d="..."atribut adalah bahwa Anda tidak memiliki kurva ganda di bagian atas drop lagi.

web-tiki

10

+1 karena Anda harus menggunakan SVG untuk ini, bukan CSS. Fitur CSS yang Anda perlukan untuk mencapainya memiliki dukungan browser yang sama dengan SVG sehingga tidak ada keuntungan untuk CSS pada skor itu. CSS dapat membuat bentuk, tapi bukan itu yang dirancang untuk itu; jangan mencoba memalu paku dengan obeng hanya demi menjadi pandai ketika Anda bisa melakukannya juga dengan alat yang dirancang untuk pekerjaan itu.

Simba

6

Bahkan lebih baik: buat file SVG dan gunakan <img />dalam dokumen hypertext.

Andreas Rejbrand

@AndreasRejbrand yang bisa menjadi ide bagus tergantung pada proyek tetapi menambahkan permintaan HTTP yang tampaknya ingin dihindari OP.

web-tiki

136

Basic Border-Radius

Anda dapat melakukan ini di dalam CSS dengan relatif mudah menggunakan batas-jari dan transformasi. CSS Anda hanya sedikit keluar.

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

Luaskan cuplikan

Radius Perbatasan Lanjutan

Ini akan sangat mirip dengan di atas tetapi memberikan bentuk yang sedikit lebih.

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

Luaskan cuplikan

Stewartside
sumber

4

@zzzzBov Saya tidak sepenuhnya mengerti bagaimana itu alat yang salah, OP meminta solusi CSS atau SVG dan saya datang dengan solusi CSS yang sesuai dengan deskripsi sedekat mungkin. Ringan dan mudah dimodifikasi.

Stewartside

12

@zzzzBov Menggunakan CSS untuk gambar dan sprite adalah penggunaan umum. Ini adalah potongan kode yang sangat minimal untuk menghasilkan "Gambar" umum. Saya percaya itu tepat karena dapat digunakan dalam spesifikasi pertanyaan yang dapat digunakan pada halaman web.

Stewartside

13

@zzzzBov: CSS sangat bagus untuk bentuk. Siapa bilang bentuk seperti apa yang digunakan? semantik gambar - OP telah dengan jelas menyatakan mereka tidak ingin menggunakan gambar, jika tidak, mengapa lagi pertanyaan seperti itu ditanyakan?

jbutler483

46

@ jbutler483, "CSS baik-baik saja untuk bentuk" tidak, ini mengerikan. Hanya karena Anda tidak dapat berarti Anda harus melakukannya . Ini memperkenalkan semua jenis sampah di markup, dan merupakan kekacauan yang membosankan untuk dipelihara. Gambar jauh lebih sederhana untuk dipelihara karena mereka mudah dipisahkan ke dalam file mandiri mereka sendiri.

zzzzBov

19

'Sampah di markup' terjadi ketika Anda menggunakan bootstrap, atau ikon font yang mengagumkan. Serius, saya pikir Anda akan sedikit di atas untuk suka ini ketika (sangat jelas) ini dapat dicapai dengan menggunakan deklarasi radius perbatasan. Tapi hay, siapa yang memberitahumu untuk tidak menggunakan gambar?

jbutler483

88

Masalah utama Anda dengan kode CSS Anda adalah:

Anda menggunakan ketinggian berbeda dari lebar
Anda belum memutar ukuran sudut yang benar

Jadi, dengan 'memperbaiki' masalah ini, Anda akan menghasilkan:

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

Luaskan cuplikan

Harap perhatikan juga untuk menghemat panjang CSS, Anda dapat menulis ulang properti radius batas Anda ke:

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

ini dapat ditingkatkan dengan elemen semu seperti yang ditunjukkan dalam biola ini

Alternatif

Saya menemukan ini oleh Vinay Challuru di codepen.

Harap dicatat bahwa dengan logika di sini, saya dapat membuat SVG untuk hampir semua bentuk build yang mungkin / etc. Misalnya, output cepat adalah:

Tampilkan cuplikan kode

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

Luaskan cuplikan

Itu menggunakan SVG dan memungkinkan Anda untuk mengubah bentuk dalam berbagai cara, memiliki kemampuan untuk mengubah bentuknya ke hasil yang diinginkan:

Tampilkan cuplikan kode

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>

Luaskan cuplikan

Penafian Saya tidak menulis pena di atas, hanya mengambilnya.

Versi CSS

Meskipun ini jauh dari selesai, Anda mungkin juga dapat menghasilkan bentuk ini menggunakan CSS.

Tampilkan cuplikan kode

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

Luaskan cuplikan

Versi SVG

Saya harus tahu bahwa SVG harus di atas jawaban ini, namun, saya suka tantangan dan jadi di sini ada upaya dengan 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>

Luaskan cuplikan

Mengubah pathnilai, Anda akan dapat mengubah bentuk desain tetesan air mata Anda.

jbutler483
sumber

10

Ini semua tampak sangat ... bertele-tele. Solusi js sangat tidak masuk akal.

egid

4

@egid: Saya menyatakan dalam jawaban saya bahwa saya tidak membuat versi js. Perhatikan juga versi js memungkinkan Anda untuk mengubah bentuk pada saat run time

jbutler483

55

IMO bentuk ini membutuhkan beziers kurva- halus untuk memastikan kontinuitas kurva.

Pertanyaan drop:

Untuk pertanyaan yang diajukan,

kurva halus tidak dapat digunakan, karena titik kontrol tidak akan sama panjangnya. Tetapi kita masih perlu membuat titik kontrol berada tepat berlawanan (180 derajat) dengan titik kontrol sebelumnya, untuk memastikan kontinuitas penuh kurva Gambar yang diberikan di bawah ini menggambarkan titik ini:

masukkan deskripsi gambar di sini
Catatan : Kurva merah dan biru adalah dua kurva kuadratik yang berbeda.

stroke-linejoin="miter", untuk bagian atas yang runcing.
SEBAGAI bentuk ini hanya menggunakan cperintah yang berurutan , kita dapat menghilangkannya.

Ini cuplikan terakhir:

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

Luaskan cuplikan

Namun TBH , kurva jawaban yang diterima tidak cukup kontinu.

Untuk IE 5-8 (VML)

Hanya berfungsi di IE 5-8. VML menggunakan perintah yang berbeda dari SVG . Misalnya. ia menggunakan v untuk bezel kubik relatif .

Catatan: Cuplikan ini tidak akan berjalan di IE 5-8 juga. Anda perlu membuat file html dan menjalankannya langsung di browser.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <style> v\:* { behavior: url(#default#VML); }

    </style >
</head>
<body>
    <div style="width:240; height:320;">
        <v:shape coordorigin="0 0" coordsize="12 16" fillcolor="white" strokecolor="black" strokewidth="1"
            strokeweight="5" style="width:240; height:320" 
            path="M 6 1 v -2 3 -5 5 -5 9
           0 7 10 7 10 0 
           0 -4 -3 -6 -5 -9 x e">
        </v:shape>
    </div>
</body>
</html>

Max Payne
sumber

"Kurva halus tidak dapat digunakan, karena titik kontrol tidak akan sama panjangnya." Bukankah "halus" hanya berarti bahwa tangen menangani (titik kontrol) duduk di garis lurus? Mengapa mereka harus memiliki panjang yang sama?

Niccolo M.

2

@NiccoloM. Dalam svg, kurva halus (perintah T dan S) berarti bahwa pegangan berlawanan secara simetris, serta sama dengan panjang pegangan sebelumnya . Dalam bahasa normal, kurva halus mungkin berarti panjang pegangan yang berbeda, tetapi dalam svg, panjangnya juga sama dengan pegangan kurva sebelumnya :)

Max Payne

42

Atau jika font pemirsa Anda mendukungnya, gunakan karakter Unicode

DROPLET: 💧 ( `💧`)

atau

DROPLET HITAM: 🌢 ( `🌢`)

Skala sesuai!

Gnubie
sumber

Anda dapat menggunakan ini dengan @ font-face, tetapi kemudian Anda memiliki file font untuk disimpan di tempat yang tepat dan semacamnya.

1934286

3

SVG dan simbol Unicode khusus seperti ini bagus. CSS untuk ini buruk. PNG baik-baik saja, tetapi tidak sempurna karena ini adalah grafik raster. JPG sangat buruk, sangat buruk sehingga saya akan mendapatkan mimpi buruk jika saya melihatnya.

Andreas Rejbrand

@AndreasRejbrand, 20x20 PNG akan berskala terburuk dari 200x200 JPG. Dan, dengan ukuran yang sama, JPG yang tidak terkompresi setara dengan PNG. Keduanya raster dan menderita masalah yang sama.

nico

@nico: Secara teori, ya, Anda dapat menggunakan JPG dengan kompresi nol. Tetapi Internet penuh dengan bencana seperti ini: en.wikipedia.org/wiki/Atomic_number#/media/…

Andreas Rejbrand

28

Saya pribadi menggunakan SVG untuk ini. Anda dapat membuat SVG di sebagian besar perangkat lunak grafik vektor. Saya akan merekomendasikan:

Inkscape
Sketsa
Adobe Illustrator

Saya telah membuat satu di bawah ini yang merupakan penelusuran bentuk Anda di 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>

Luaskan cuplikan

Djave
sumber

27

Kanvas HTML

Ini adalah opsi yang belum ditemukan di utas ini sejauh ini. Perintah yang digunakan untuk gambar Canvas sangat mirip dengan SVG (dan web-tiki layak mendapatkan kredit untuk ide dasar yang digunakan dalam jawaban ini).

Bentuk yang dimaksud dapat dibuat menggunakan perintah kurva kanvas sendiri (Kuadratik atau Bezier) atau Path API. Jawabannya berisi contoh untuk ketiga metode.

Dukungan browser untuk Canvas cukup bagus .

Menggunakan Kurva Quadratic

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>

Luaskan cuplikan

Di bawah ini adalah versi lanjutan dengan fill gradien dan bayangan. Saya juga menyertakan hoverefek pada bentuk untuk menggambarkan satu kelemahan Canvas jika dibandingkan dengan SVG. Kanvas berbasis raster (pixel) dan karenanya akan terlihat buram / pixelated ketika ditingkatkan di luar titik tertentu. Satu-satunya solusi untuk itu adalah mengecat ulang bentuk pada setiap ukuran browser yang merupakan overhead.

Tampilkan cuplikan kode

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>

Luaskan cuplikan

Menggunakan Bezier Curves

Tampilkan cuplikan kode

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>

Luaskan cuplikan

Menggunakan Path API

Tampilkan cuplikan kode

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>

Luaskan cuplikan

^{catatan: Seperti yang disebutkan dalam jawaban saya di sini , Path API belum didukung oleh IE dan Safari.}

Bacaan lebih lanjut:

Harry
sumber

Saya tidak melihat bagaimana svg adalah opsi yang lebih baik selalu. itu tentu pilihan yang lebih baik dalam banyak kasus seperti ini. Tapi kanvas punya kelebihannya sendiri. Jawaban bagus. dari jawaban Anda saya bisa melihat itu, tentu jauh lebih mudah untuk menggunakan SVG!

Max Payne

Ya @TimKrul, lebih mudah untuk menulis / menggunakan SVG. Kanvas memiliki kelebihannya sendiri tetapi dari apa pun yang saya baca, kanvas ini tidak terlalu menguntungkan ketika digunakan untuk logo seperti bentuk terutama karena berbasis raster tidak seperti SVG.

Harry

25

Saya juga menemukan ini pada Codepen yang dibuat oleh pengguna Ana Tudor menggunakan CSS dan box-shadowpersamaan gaya dan parametrik. Sangat sederhana, kode yang sangat sedikit. Dan banyak browser mendukung gaya Box-shadow CSS3:

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>

Luaskan cuplikan

Luke Shimkus
sumber

7

Ini tidak menyerupai jenis tetesan air mata yang diminta.

doppelgreener

20

Versi CSS

Karena ada beberapa jawaban yang adil di sini saya pikir mengapa tidak menambahkannya dengan metode lain. Ini menggunakan HTML dan CSS untuk membuat tetesan air mata.

Ini akan memungkinkan Anda untuk mengubah warna perbatasan dan latar belakang tetesan air mata dan juga ukuran ulang bagian atas itu.

Menggunakan satu divkita dapat membuat lingkaran dengan borderdan border-radius. Kemudian menggunakan elemen pseudo ( :before& :after) kita membuat segitiga CSS ^{lebih lanjut di sini} , ini akan bertindak sebagai ujung dari tetesan air mata. Menggunakan :beforesebagai batas kita letakkan :afterdi atas dengan ukuran yang lebih kecil dan warna latar yang diinginkan.

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>

Luaskan cuplikan

Berikut ini adalah demo dari titisan air mata dengan warna latar belakang

Tampilkan cuplikan kode

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>

Luaskan cuplikan

Ini sesederhana menempatkan warna latar belakang ke divdan mengubah :after bottom-borderwarna menjadi sama. Untuk mengubah batas, Anda juga perlu mengubah divwarna batas dan :beforewarna latar.

Memerah
sumber

Ruddy pen tidak memiliki nilai warna latar belakang.

Persijn

2

@Persijn Harry mengatakan sesuatu dalam obrolan dan saya melihatnya di pena yang lupa menyimpannya secara otomatis setiap saat. Haha, aku akan mengembalikannya seperti semula. Selesai

Ruddy

17

Sangat mudah untuk melakukan ini dengan SVG dengan hanya menggunakan sumber konversi gambar seperti http://image.online-convert.com/convert-to-svg , yang digunakan untuk membuat yang berikut:

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

Luaskan cuplikan

Anonim
sumber

9

@ Perersn mengapa Anda terus bertanya disalin dari beberapa editor? Svg adalah svg, Anda dapat menggunakan alat apa pun yang ingin Anda buat.

Abhinav Gauniyal

2

@AbhinavGauniyal: 'editor' seperti Anda suka menyebutnya, tambahkan 'bulu' ekstra untuk deklarasi. Misalnya, 300.000000ptdan metadata yang tidak benar-benar diperlukan

jbutler483

12

@ Perersn apa yang Anda maksud dengan tangan / kode. Seseorang baru saja membuat / tangan / kode ilustrator untuk memudahkan tugas pengkodean mereka, dan itu masih menghasilkan hal yang sama. Kemudian lagi ketika Anda menggunakan svg di browser, mengapa tidak Anda sendiri tangan / kode itu menggunakan bahasa assembly? dan mengapa berhenti di perakitan, tangan / kode itu menggunakan kabel atau menggambar sendiri. Ini bukan alasan yang kuharapkan.

Abhinav Gauniyal

2

@ jbutler483 ya dan mereka dapat dipangkas. Ada banyak alat yang melakukan itu untuk Anda, berikut ini satu untuk Anda github.com/svg/svgo

Abhinav Gauniyal

6

@persijn jawaban ini menyediakan jalur svg yang diperlukan. saya benar-benar tidak tahu apa keberatan Anda.

user428517

14

Jika Anda memilih untuk menggunakan SVG Anda harus membaca di jalur. Saya juga menyarankan editor SVG.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="-0.05 0 1195.1 703" preserveAspectRatio="xMidYMid meet" zoomAndPan="disable" transform="">
    <defs id="svgEditorDefs">
        <line id="svgEditorLineDefs" stroke="black" style="fill: none; vector-effect: non-scaling-stroke; stroke-width: 1px;"/>
    </defs>
    <rect id="svgEditorBackground" x="0" y="0" width="1195" height="703" style="fill: none; stroke: none;"/>
    <path stroke="black" id="e1_circleArc" style="fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke;" d="M 198 207 a 117.969 117.969 0 1 0 213 8" transform=""/>
    <path stroke="black" id="e4_circleArc" style="fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke;" transform="" d="M 411.348 215.696 a 349.677 349.677 0 0 0 -110.37 -131.718"/>
    <path stroke="black" style="fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke;" transform="matrix(-0.182706 -0.983168 0.983168 -0.182706 157.664 417.408)" id="e6_circleArc" d="M 301.799 202.299 a 329.763 329.763 0 0 0 -102.951 -124.781"/>
</svg>

Luaskan cuplikan

Brennen Sprimont
sumber

1

Mengapa Anda menggunakan baris di dalam tag defs? Dan tidak bisakah Anda melakukan bentuk ini dalam satu jalur bukan 3 + persegi panjang?

Persijn

6

Berikut adalah empat bentuk teardrop SVG yang semakin sederhana:

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

Luaskan cuplikan

Andrew Willems
sumber

Bagaimana cara membuat tetesan air mata dalam HTML?

Jawaban:

Pendekatan SVG:

Basic Border-Radius

Radius Perbatasan Lanjutan

Alternatif

Versi CSS

Versi SVG

Pertanyaan drop:

Untuk IE 5-8 (VML)

DROPLET: 💧 ( `💧`)

DROPLET HITAM: 🌢 ( `🌢`)

Kanvas HTML

Menggunakan Kurva Quadratic

Menggunakan Bezier Curves

Menggunakan Path API

Versi CSS

Bagaimana cara membuat tetesan air mata dalam HTML?

Jawaban:

Pendekatan SVG:

Basic Border-Radius

Radius Perbatasan Lanjutan

Alternatif

Versi CSS

Versi SVG

Pertanyaan drop:

Untuk IE 5-8 (VML)

DROPLET: 💧 ( &#128167;)

DROPLET HITAM: 🌢 ( &#127778;)

Kanvas HTML

Menggunakan Kurva Quadratic

Menggunakan Bezier Curves

Menggunakan Path API

Versi CSS

DROPLET: 💧 ( `💧`)

DROPLET HITAM: 🌢 ( `🌢`)