222

Làm cách nào để tạo hình như thế này để hiển thị trên trang web?

Tôi không muốn sử dụng hình ảnh vì chúng sẽ bị mờ khi thu nhỏ

Hình dạng giọt nước mắt tôi cần thực hiện với HTML, CSS hoặc SVG

Tôi đã thử với 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>

Mở rộng đoạn trích

Điều đó hóa ra thực sự khó chịu.

Và sau đó tôi đã thử với SVG:

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

Mở rộng đoạn trích

Nó đã có được hình dạng, nhưng phần dưới không cong.

Có cách nào để tạo hình dạng này để nó có thể được sử dụng trong trang HTML không?

— Ba Tư
nguồn

12

"Tôi không muốn sử dụng hình ảnh vì chúng sẽ bị mờ khi chia tỷ lệ", tại sao bạn lại thu nhỏ hình ảnh? Chúng không bị mờ nếu bạn sử dụng [srcset]hoặc <picture>phần tử. Tốt hơn nữa, chỉ cần liên kết đến một hình ảnh svg:<img src="tear.svg" alt="Teardrop"/>

— zzzzBov

32

@zzzzBov: Bạn có thực sự đề xuất pictureyếu tố này không?Không hỗ trợ cho IE, không hỗ trợ cho các phiên bản Chrome đầu tiên, không hỗ trợ cho safari. Tôi có nên tiếp tục?

— jbutler483

9

@zzzzBov. why are you scaling the image?Chà, hình ảnh có thể xuất hiện mờ mà không có tỷ lệ dev. Tất cả những gì bạn cần là một trình duyệt phóng to. Trong trường hợp của tôi, tôi có màn hình HighDPI và nhiều hình ảnh mờ. Vì vậy, yeah, nếu bạn có thể tránh hình ảnh bằng cách sử dụng SVG, hãy tìm nó.

— Nolonar

63

Unicode giải quyết tất cả ... U + 1F4A7

— Thomas Weller

21

@Thomas Tôi thấy một hình vuông: / i.stack.imgur.com/8fXMf.png

— user000001

327

Cách tiếp cận SVG:

Bạn có thể dễ dàng đạt được đường cong kép với một SVG nội tuyến và <path/>phần tử thay vì<polygon/> phần tử không cho phép hình dạng cong.

Ví dụ sau sử dụng <path/>phần tử với:

2 lệnh đường cong bậc hai cho 2 đường cong trên cùng (các đường bắt đầu bằngQ )
Lệnh 1 cung cho đáy lớn nhất (bắt đầu bằng 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>

Mở rộng đoạn trích

SVG là một công cụ tuyệt vời để tạo ra loại hình này với các đường cong kép. Bạn có thể kiểm tra bài đăng này về các đường cong kép với so sánh SVG / CSS. Một số ưu điểm của việc sử dụng SVG trong trường hợp này là:

Kiểm soát đường cong
Kiểm soát điền (độ mờ, màu)
Kiểm soát đột quỵ (chiều rộng, độ mờ, màu sắc)
Số lượng mã
Thời gian để xây dựng và duy trì hình dạng
Có thể mở rộng
Không có yêu cầu HTTP (nếu được sử dụng nội tuyến như trong ví dụ)

Hỗ trợ trình duyệt cho SVG nội tuyến quay trở lại Internet Explorer 9. Xem canIuse để biết thêm thông tin.

— web-tiki
nguồn

nó có thể giảm xuống: <svg width="100%" height="100%" viewBox="0 0 8 8" /> <path d="M4 1L3 4A1.2 2 0 1 0 5 4"/> </svg> ... điều này sẽ lấp đầy khu vực bạn cung cấp, do đó, nó có thể làm cho những hạt mưa "béo" hoặc "gầy" ... thay đổi thành chiều cao / chiều rộng cố định nếu cần

— Technosaurus

1

@technosaurus vấn đề với việc giảm số lượng lệnh trong d="..."thuộc tính là bạn không còn đường cong kép ở đầu thả nữa.

— web-tiki

10

+1 vì bạn nên sử dụng SVG cho việc này, không phải CSS. Các tính năng CSS mà bạn cần để đạt được nó có cùng hỗ trợ trình duyệt như SVG, do đó không có lợi thế nào cho CSS về điểm số đó. CSS có thể tạo hình, nhưng đó không phải là những gì nó được thiết kế cho; đừng cố đóng đinh bằng tuốc nơ vít chỉ vì khéo léo khi bạn có thể làm điều đó cũng tốt với một công cụ được thiết kế cho công việc.

— Simba

6

Thậm chí tốt hơn: tạo một tệp SVG và sử dụng <img />trong tài liệu siêu văn bản.

— Andreas Rejbrand

@AndreasRejbrand có thể là một ý tưởng tốt tùy thuộc vào dự án nhưng nó thêm một yêu cầu HTTP mà OP dường như muốn tránh.

— web-tiki

135

Biên giới cơ bản

Bạn có thể thực hiện việc này trong CSS tương đối dễ dàng bằng cách sử dụng đường kính bán kính 'và biến đổi. CSS của bạn chỉ là một chút ra.

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

Mở rộng đoạn trích

Biên giới nâng cao

Điều này sẽ rất giống với ở trên nhưng cho nó một hình dạng hơn một chút.

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

Mở rộng đoạn trích

— Stewartside
nguồn

4

@zzzzBov Tôi không hiểu đầy đủ về công cụ sai như thế nào, OP đã yêu cầu một giải pháp CSS hoặc SVG và tôi đã đưa ra một giải pháp CSS phù hợp với mô tả càng gần càng tốt. Nó nhẹ và dễ dàng để sửa đổi.

— Stewartside

12

@zzzzBov Sử dụng CSS cho hình ảnh và họa tiết là cách sử dụng phổ biến. Đó là một đoạn mã rất tối thiểu để tạo ra một "Hình ảnh" chung chung. Tôi tin rằng nó phù hợp vì nó có thể sử dụng được trong các câu hỏi về việc có thể sử dụng được trên một trang web.

— Stewartside

13

@zzzzBov: CSS hoàn toàn tốt cho hình dạng. Ai sẽ nói hình dạng như vậy được sử dụng để làm gì? về mặt ngữ nghĩa một hình ảnh - OP đã tuyên bố rõ ràng rằng họ không muốn sử dụng một hình ảnh, nếu không thì tại sao một câu hỏi như vậy lại được hỏi?

— jbutler483

46

@ jbutler483, "CSS hoàn toàn tốt cho hình dạng" không, thật tệ. Chỉ vì bạn có thể không có nghĩa là bạn nên . Nó giới thiệu tất cả các loại rác trong đánh dấu, và là một mớ hỗn độn tẻ nhạt để duy trì. Hình ảnh đơn giản hơn nhiều để duy trì vì chúng dễ dàng tách thành tập tin riêng lẻ của riêng họ.

— zzzzBov

19

'Rác trong đánh dấu' xảy ra khi bạn sử dụng bootstrap hoặc phông chữ biểu tượng tuyệt vời. Nghiêm túc mà nói, tôi nghĩ rằng bạn sẽ vượt lên trên đỉnh cao vì thích điều này khi (khá rõ ràng) điều này có thể đạt được bằng cách sử dụng khai báo bán kính đường viền. Nhưng hay, ai bảo bạn không sử dụng hình ảnh?

— jbutler483

88

Vấn đề chính của bạn với mã CSS của bạn là:

Bạn đã sử dụng chiều cao khác với chiều rộng
Bạn chưa xoay đúng kích thước góc

Vì vậy, bằng cách 'khắc phục' các vấn đề này, bạn sẽ tạo ra:

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

Mở rộng đoạn trích

Cũng xin lưu ý để tiết kiệm độ dài CSS, bạn có thể viết lại các thuộc tính bán kính đường viền của mình thành:

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

điều này có thể được tăng cường với các yếu tố giả như trong câu đố này

Lựa chọn thay thế

Tôi tìm thấy điều này bởi Vinay Challuru trên codepen.

Xin lưu ý rằng với logic ở đây, tôi đã có thể tạo SVG gần như bất kỳ hình dạng xây dựng nào có thể / v.v. Ví dụ: một đầu ra nhanh là:

Hiển thị đoạn mã

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

Mở rộng đoạn trích

Đó là sử dụng một SVG và cho phép bạn thay đổi hình dạng theo nhiều cách, có khả năng thay đổi hình dạng của nó thành kết quả mong muốn:

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

Từ chối trách nhiệm Tôi đã không viết bút trên, chỉ có nguồn gốc nó.

Phiên bản CSS

Mặc dù điều này còn lâu mới hoàn thành, bạn cũng có thể tạo hình dạng này bằng CSS.

Hiển thị đoạn mã

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

Mở rộng đoạn trích

Phiên bản SVG

Tôi nên biết rằng SVG nên đứng đầu câu trả lời này, tuy nhiên, tôi thích một thử thách và vì vậy đây là một nỗ lực với 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>

Mở rộng đoạn trích

Thay đổi các pathgiá trị, bạn sẽ có thể thay đổi hình dạng của thiết kế giọt nước mắt của bạn.

— jbutler483
nguồn

10

Tất cả những điều này có vẻ rất ... dài dòng. Giải pháp js đặc biệt vô lý.

— vd:

4

@egid: Tôi đã nói trong câu trả lời của mình rằng tôi không tạo phiên bản js. Cũng lưu ý rằng phiên bản js cho phép bạn thay đổi hình dạng trong thời gian chạy

— jbutler483

55

IMO hình dạng này đòi hỏi phải có đường cong trơn tru để đảm bảo tính liên tục của đường cong.

Câu hỏi thả:

Đối với câu hỏi thả

đường cong trơn tru không thể được sử dụng, vì các điểm kiểm soát sẽ không có cùng chiều dài. Nhưng chúng ta vẫn cần làm cho các điểm kiểm soát nằm chính xác ngược lại (180 độ) với các điểm kiểm soát trước đó, để đảm bảo tính liên tục của đường cong Hình ảnh được đưa ra dưới đây minh họa điểm này:

nhập mô tả hình ảnh ở đây
Lưu ý : Đường cong màu đỏ và màu xanh là hai đường cong bậc hai khác nhau.

stroke-linejoin="miter", cho phần đầu nhọn.
NHƯ hình dạng này chỉ sử dụng các clệnh liên tiếp , chúng ta có thể bỏ qua nó.

Đây là đoạn trích cuối cùng:

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

Mở rộng đoạn trích

TBH mặc dù , đường cong câu trả lời được chấp nhận không hoàn toàn liên tục.

Dành cho IE 5-8 (VML)

Chỉ hoạt động trong IE 5-8. VML sử dụng các lệnh khác với SVG . Ví dụ. nó sử dụng v cho beziers khối tương đối .

Lưu ý: Đoạn mã này cũng sẽ không chạy trong IE 5-8. Bạn cần tạo một tệp html và chạy nó trực tiếp trong trình duyệt.

<!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
nguồn

"đường cong trơn tru không thể được sử dụng, vì các điểm kiểm soát sẽ không có cùng độ dài." Không "trơn tru" chỉ có nghĩa là tay cầm tiếp tuyến (điểm kiểm soát) nằm trên một đường thẳng? Tại sao chúng phải có cùng chiều dài?

— Niccolo M.

2

@NiccoloM. Trong svg, đường cong trơn tru (lệnh T và S) có nghĩa là tay cầm đối xứng đối xứng, cũng như bằng chiều dài của tay cầm trước đó . Trong ngôn ngữ bình thường, đường cong trơn tru có thể có nghĩa là độ dài tay cầm khác nhau, nhưng trong svg, độ dài cũng bằng với đường cong xử lý trước đó :)

— Max Payne

42

Hoặc nếu phông chữ của người xem của bạn hỗ trợ nó, hãy sử dụng các ký tự Unicode

DROPLET: 💧 (`💧` )

hoặc là

VÒI ĐEN: (`🌢` )

Quy mô phù hợp!

— Gnubie
nguồn

Bạn có thể sử dụng điều này với @ font-face, nhưng sau đó bạn có một tệp phông chữ để giữ đúng vị trí và như vậy.

— 1934286

3

SVG và một biểu tượng Unicode chuyên dụng như thế này là tốt. CSS cho điều này là xấu. PNG là ổn, nhưng không hoàn hảo vì nó là đồ họa raster. JPG cực kỳ tệ, tệ đến mức tôi sẽ gặp ác mộng nếu nhìn thấy nó.

— Andreas Rejbrand

@AndreasRejbrand một PNG 20x20 sẽ có tỷ lệ tệ nhất so với JPG 200x200. Và, với cùng kích thước, JPG không nén tương đương với PNG. Cả hai đều raster và họ chịu cùng một vấn đề.

— nico

@nico: Về lý thuyết, có, bạn có thể sử dụng JPG với độ nén bằng không. Nhưng Internet đầy những thảm họa như thế này: en.wikipedia.org/wiki/Atomic_number#/media/

— gợi

28

Cá nhân tôi sẽ sử dụng một SVG cho việc này. Bạn có thể tạo SVG trong hầu hết các phần mềm đồ họa vector. Tôi khuyên bạn nên:

Inkscape
Phác thảo
Adobe Illustrator

Tôi đã thực hiện một cái bên dưới đó là dấu vết hình dạng của bạn trong 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>

Mở rộng đoạn trích

— Djave
nguồn

27

Canvas Canvas

Đây là một tùy chọn được phát hiện trong chủ đề này cho đến nay. Các lệnh được sử dụng cho các bản vẽ Canvas rất giống với SVG (và web-tiki xứng đáng với các khoản tín dụng cho ý tưởng cơ bản được sử dụng trong câu trả lời này).

Hình dạng trong câu hỏi có thể được tạo bằng cách sử dụng các lệnh đường cong của chính canvas (Quadratic hoặc Bezier) hoặc API Path. Câu trả lời chứa các ví dụ cho cả ba phương pháp.

Hỗ trợ trình duyệt cho Canvas khá tốt .

Sử dụng đường cong bậc hai

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>

Mở rộng đoạn trích

Dưới đây là một phiên bản nâng cao với độ dốc và bóng đổ. Tôi cũng đã bao gồm một hoverhiệu ứng trên hình dạng để minh họa một nhược điểm của Canvas khi so sánh với SVG. Canvas dựa trên raster (pixel) và do đó sẽ trông mờ / pixel khi được thu nhỏ hơn một điểm nhất định. Giải pháp duy nhất cho điều đó là sơn lại hình dạng trên mỗi trình duyệt thay đổi kích thước vốn là một chi phí.

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

Sử dụng đường cong Bezier

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

Sử dụng API đường dẫn

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

^{Lưu ý: Như đã đề cập trong câu trả lời của tôi ở đây , API đường dẫn chưa được IE và Safari hỗ trợ.}

Đọc thêm:

— Harry
nguồn

Tôi không thấy làm thế nào Svg là lựa chọn tốt hơn luôn luôn. nó chắc chắn là lựa chọn tốt hơn trong nhiều trường hợp như thế này. Nhưng vải có ưu điểm riêng của nó. Câu trả lời tốt đẹp. Từ câu trả lời của bạn tôi có thể nhận ra rằng, việc sử dụng SVG chắc chắn sẽ dễ dàng hơn rất nhiều!

— Max Payne

Vâng @TimKrul, việc viết / sử dụng SVG dễ dàng hơn. Canvas có ưu điểm riêng nhưng từ bất cứ điều gì tôi đọc, nó không quá thuận lợi khi sử dụng cho logo đơn giản như hình dạng chủ yếu vì nó dựa trên raster không giống như SVG.

— Harry

25

Tôi cũng tìm thấy điều này trên Codepen được tạo bởi người dùng Ana Tudor bằng CSS và các box-shadowphương trình kiểu và tham số. Rất đơn giản, rất ít mã. Và nhiều trình duyệt hỗ trợ kiểu Bóng hộp 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>

Mở rộng đoạn trích

— Luke Shimkus
nguồn

7

Điều này không giống với loại giọt nước mắt được yêu cầu, mặc dù.

— doppelgreener

20

Phiên bản CSS

Vì có một vài câu trả lời công bằng ở đây tôi nghĩ tại sao không thêm vào nó bằng một phương pháp khác. Điều này đang sử dụng cả HTML và CSS để tạo ra giọt nước mắt.

Điều này sẽ cho phép bạn thay đổi màu của đường viền và nền của giọt nước mắt và cũng kích thước lại phần trên cùng của nó.

Sử dụng một đơn divchúng ta có thể tạo một vòng tròn với bordervà border-radius. Sau đó, bằng cách sử dụng các phần tử giả ( :before& :after), chúng tôi tạo ra một tam giác CSS ^{ở đây} , điều này sẽ đóng vai trò là đỉnh của giọt nước mắt. Sử dụng :beforenhư đường viền chúng ta đặt :afterlên trên cùng với kích thước nhỏ hơn và màu nền mong muốn.

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>

Mở rộng đoạn trích

Dưới đây là bản demo của giọt nước mắt với màu nền

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

Nó đơn giản như việc đặt một màu nền lên divvà thay đổi :after bottom-bordermàu giống nhau. Để thay đổi đường viền, bạn cũng cần thay đổi divmàu đường viền và :beforemàu nền.

— Xù
nguồn

Ruddy bút bị thiếu một giá trị màu nền.

— Persijn

2

@Persijn Harry đã nói điều gì đó trong trò chuyện và tôi đang nhìn nó trên cây bút mà quên nó tự động lưu mọi lúc mọi nơi. Haha, tôi sẽ đặt nó trở lại như cũ. Làm xong.

— Ruddy

17

Thật dễ dàng để làm điều này với SVG chỉ bằng cách sử dụng tài nguyên chuyển đổi hình ảnh, chẳng hạn như http://image.online-convert.com/convert-to-svg , được sử dụng để tạo như sau:

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

Mở rộng đoạn trích

— Vô danh
nguồn

9

@Persijn tại sao bạn cứ hỏi sao chép từ một số biên tập viên? Svg là svg, bạn có thể sử dụng bất kỳ công cụ nào bạn muốn tạo.

— Abhinav Gauniyal

2

@AbhinavGauniyal: 'biên tập viên' khi bạn muốn gọi họ, thêm 'lông tơ' vào khai báo. Ví dụ: 300.000000ptvà siêu dữ liệu không thực sự cần thiết

— jbutler483

12

@Persijn có nghĩa là gì bằng tay / mã hóa. Ai đó chỉ làm / vẽ tay / vẽ tranh minh họa để dễ dàng thực hiện các nhiệm vụ mã hóa của mình và nó vẫn tạo ra điều tương tự. Sau đó, một lần nữa khi bạn đang sử dụng svg trong trình duyệt, tại sao bạn không tự mình viết mã bằng ngôn ngữ hợp ngữ? và tại sao dừng lại ở lắp ráp, tay / mã nó bằng dây hoặc chỉ tự vẽ nó. Đây không phải là một lý do mà tôi đã mong đợi.

— Abhinav Gauniyal

2

@ jbutler483 có và chúng có thể được cắt bớt. Có nhiều công cụ làm điều đó cho bạn, đây là một công cụ dành cho bạn github.com/svg/svgo

— Abhinav Gauniyal

6

@persijn câu trả lời này cung cấp các đường dẫn svg cần thiết. tôi thực sự không có manh mối gì về sự phản đối của bạn.

— dùng428517

14

Nếu bạn chọn sử dụng SVG, bạn nên đọc trên đường dẫn. Tôi cũng sẽ đề nghị một trình soạn thảo 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>

Mở rộng đoạn trích

— Brennen Sprimont
nguồn

1

Tại sao bạn sẽ sử dụng một dòng bên trong thẻ defs? Và bạn không thể thực hiện hình dạng này trong một con đường chứ không phải 3 + một trực tràng?

— Persijn

6

Dưới đây là bốn hình dạng giọt nước SVG đơn giản hơn:

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

Mở rộng đoạn trích

— Andrew Willems
nguồn

Làm cách nào để tạo một giọt nước mắt trong HTML?

Cách tiếp cận SVG:

Biên giới cơ bản

Biên giới nâng cao

Lựa chọn thay thế

Phiên bản CSS

Phiên bản SVG

Câu hỏi thả:

Dành cho IE 5-8 (VML)

DROPLET: 💧 (&#128167; )

VÒI ĐEN: (&#127778; )

Canvas Canvas

Sử dụng đường cong bậc hai

Sử dụng đường cong Bezier

Sử dụng API đường dẫn

Phiên bản CSS

DROPLET: 💧 (`💧` )

VÒI ĐEN: (`🌢` )