Как создать слезу в HTML?

Question

Как создать слезу в HTML?

211

Как создать такую форму для отображения на веб-странице?

Я не хочу использовать изображения, так как они будут размыты при масштабировании

Я пробовал с 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>

Это оказалось действительно ввернутым.

И затем я попытался с SVG:

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

Он получил форму, но нижняя часть не была изогнутой.

Есть ли способ создать эту форму, чтобы ее можно было использовать на странице HTML?

Persijn 08 июнь 2015, в 15:01

Источник

0

Вы можете создать нужную форму здесь (и увидеть код, нажав одну из верхних кнопок): svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html#group
Seblor 08 июнь 2015, в 14:09
12

«Я не хочу использовать изображения, потому что они будут размыты при масштабировании», почему вы масштабируете изображение? Они не становятся размытыми, если вы используете [srcset] или элемент <picture> . А еще лучше, просто ссылку на изображение SVG: <img src="tear.svg" alt="Teardrop"/>
zzzzBov 08 июнь 2015, в 15:59
32

@zzzzBov: Вы действительно рекомендуете элемент picture ? Нет поддержки IE, нет поддержки ранних версий Chrome, нет поддержки Safari. Мне продолжать?
jbutler483 08 июнь 2015, в 16:03
2

@ jbutler483, я рекомендую SVG для этого случая, но после этого, да, я рекомендую элемент <picture> , а также Picturefill и соответствующий запасной вариант noscript .
zzzzBov 08 июнь 2015, в 16:51
9

@zzzzBov. why are you scaling the image? Ну, изображение может выглядеть размытым без масштабирования его разработчиком. Все, что вам для этого нужно, - это увеличение браузера. В моем случае у меня есть экран HighDPI и множество размытых изображений. Так что, да, если вы можете избежать изображений с помощью SVG, сделайте это.
Nolonar 08 июнь 2015, в 21:58
63

Юникод решает все это ... U + 1F4A7
Thomas Weller 09 июнь 2015, в 14:03
21

@ Томас Я вижу квадрат: / i.stack.imgur.com/8fXMf.png
user000001 09 июнь 2015, в 16:52
0

Я думаю, что «дроплет» более уместно использовать для заголовка этого вопроса?
Mp de la Vega 10 июнь 2015, в 03:04
3

@ jbutler483 Возможно, Safari и IE, но кого волнуют ранние версии Chrome? Тем более, что Chrome почти заставляет вас автоматически обновляться.
immibis 10 июнь 2015, в 11:24
1

Семантически и практически, я думаю, вы должны использовать изображение для этого. Но, конечно, вы не должны использовать растровое графическое изображение (не PNG, и определенно не JPG, Боже, нет), а векторное графическое изображение (то есть на практике SVG).
Andreas Rejbrand 10 июнь 2015, в 12:28
3

Для достижения этой формы есть преимущества использования css и svg .
Persijn 10 июнь 2015, в 12:32
0

@immibis старые мобильные телефоны могут не получать обновления для браузеров
Volvox 12 июнь 2015, в 07:13
0

Почему бы не изменить название вопроса на «капля воды»?
Salman A 13 июнь 2015, в 13:58
3

@SalmanA ... потому что слезинка - лучшее описание для этой формы. Реальная капля воды (не на поверхности) больше похожа на желе-рыбу без щупалец ... хотя большинство людей признают слезинку символом дождя, это сочетание уловок глаза в быстром движении дождя капля интерполируется к более заметному медленному течению слезинки
technosaurus 14 июнь 2015, в 02:32
1

@peter Нужна ли нам ссылка на Википедию, чтобы узнать, что такое HTML?
Scimonster 15 июнь 2015, в 08:40

Показать ещё 13 комментариев

Теги:

html

css

css3

svg

css-shapes

12 ответов

121

Базовый радиус границы

Вы можете сделать это в CSS относительно легко, используя border-radius 'и transforms. Ваш CSS был немного немного.

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

Расширенный радиус границы

Это будет очень похоже на выше, но придает ему немного больше формы.

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

Stewartside 08 июнь 2015, в 15:25

62

CSS - неподходящий инструмент для работы
zzzzBov 08 июнь 2015, в 15:48
3

@zzzzBov Я не совсем понимаю, как это не тот инструмент, OP попросил решение CSS или SVG, и я придумал решение CSS, которое соответствует описанию настолько близко, насколько это возможно. Его легкий и простой в модификации.
Stewartside 08 июнь 2015, в 15:52
1

Нигде в вопросе не говорится, что CSS или SVG является требованием. ОП просто опубликовал свои собственные попытки и спросил: «Есть ли способ создать эту фигуру, чтобы ее можно было использовать на HTML-странице?» Этот ответ предполагает использование CSS, который не является подходящим способом создания того, что является семантически изображением.
zzzzBov 08 июнь 2015, в 15:55
12

@zzzzBov Использование CSS для изображений и спрайтов является обычным делом. Это очень минимальный кусок кода для генерации общего «образа». Я считаю, что это уместно, потому что его можно использовать в рамках вопросов, которые можно использовать на веб-странице.
Stewartside 08 июнь 2015, в 15:59
13

@zzzzBov: CSS отлично подходит для фигур. Кто скажет, для чего используется такая форма? семантически изображение - OP четко заявили, что не хотят использовать изображение, иначе зачем задавать такой вопрос?
jbutler483 08 июнь 2015, в 16:00
46

@ jbutler483, «CSS отлично подходит для фигур» нет, это ужасно. То, что ты можешь , не означает, что ты должен . Он вводит все виды мусора в разметке и является утомительным беспорядком в обслуживании. Изображения намного проще в обслуживании, так как они легко разделяются на отдельные отдельные файлы.
zzzzBov 08 июнь 2015, в 16:53
4

@zzzzBov: Полагаю, вы просто один из тех людей, которым не нравятся формы. Все в порядке. Но я полагаю, что вы также использовали бы изображение для подобных кругу только потому, что это более «символично». Хотя да, для некоторых элементов изображение будет иметь меньший размер, чем размер файла CSS, но в большинстве случаев зачем добавлять дополнительный вызов http, если вы можете (весьма радостно) уменьшить его, используя короткий фрагмент CSS.
jbutler483 09 июнь 2015, в 08:08
18

«Мусор в разметке» возникает, когда вы используете начальную загрузку или шрифтовые иконки. Серьезно, я думаю, что вы немного превзойдете подобные моменты, когда (вполне очевидно) это может быть достигнуто с помощью объявления радиуса границы. Но скажите, кто скажет вам не использовать изображения?
jbutler483 09 июнь 2015, в 08:08
1

@zzzzBov: если это украшение, то вообще не требует разметки; а :before или :after сделаю. Если это контент («семантически изображение»), вы можете использовать соответствующее маленькое изображение и альтернативный текст для отступления (сбой загрузки CSS, пользовательские настройки, доступность) и при этом использовать CSS, чтобы получить что-то, что хорошо масштабируется. SVG также работает, но для выполнения работы нужно всего две линии и дуга в одном штрихе.
Stan Rogers 09 июнь 2015, в 15:27
4

CSS может быть полностью правильным решением. @zzzzBov, если бы клиент потребовал нестандартную метку li, то есть галочку, треугольник, что угодно, вы бы использовали изображение? Или вы бы использовали: раньше? Если вы хотите использовать что-то еще, пожалуйста, оставьте комментарий, мне нравится изучать новые методы.
sareed 09 июнь 2015, в 21:38
1

Для CSS это удивительно - но я предпочитаю подход SVG
Jeremy Dicaire 10 июнь 2015, в 17:55
2

Я не уверен, почему все здесь упускают суть ... я имею в виду, может быть, это я, но ... вы знаете, без обид, но это совсем не похоже на слезы .
o0'. 11 июнь 2015, в 09:15
1

@Lohoris: я забыл, как выглядят слезинки, так как я их давно не видел. Но для капель дождя , я думаю, они довольно близки: P
jbutler483 11 июнь 2015, в 09:35
2

В соответствии с этим капли дождя имеют форму от сферической до гамбургерной формы, так что это выглядит ближе к каплеобразной капле. Что касается того, подходит ли CSS для этого или нет, это действительно зависит от использования и является полностью субъективным. Поскольку ОП пытался использовать CSS и не указал никаких причин, чтобы дисквалифицировать CSS как допустимое решение, я бы сказал, что CSS - это полностью правильный подход, и, честно говоря, это довольно умное решение. +1 от меня :)
Trevor Brown 11 июнь 2015, в 19:53
0

это такой потрясающий ответ. Удивительно, на что способна маленькая перспектива ... если ты способен это увидеть.
Alvaro Menéndez 25 окт. 2015, в 21:25

Показать ещё 13 комментариев

89

Основная проблема с вашим кодом CSS:

Вы использовали разную высоту, чем ширина
Вы не повернули правильный размер угла

Итак, "исправляя" эти проблемы, вы должны генерировать:

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

Также обратите внимание, чтобы сохранить длину CSS, вы можете переписать свои свойства border-radius для:

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

это может быть усилено с помощью псевдоэлементов , как показано в этой скрипте

Альтернативы

Я нашел этот Vinay Challuru в кодеде.

Обратите внимание, что с логикой здесь я смог создать SVG практически любую возможную форму сборки /etc. Например, быстрый выход:

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

Он использует SVG и позволяет вам изменять форму несколькими способами, имея возможность изменять свою форму до желаемого результата:

var SVG = function() {
  this.element = document.getElementsByTagName("svg")[0];
  this.namespace = "http://www.w3.org/2000/svg";
  this.width = 400;
  this.height = 400;
}

/****Let 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 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>

Отказ от ответственности Я не писал указанное перо, только получил его.

Версия CSS

Хотя это далеко не полный, вы также можете сгенерировать эту форму с помощью CSS.

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

Версия SVG

Я должен знать, что SVG должен быть в верхней части этого ответа, однако мне нравится вызов, поэтому вот попытка с 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>

Изменив значения path, вы сможете изменить форму своего дизайна teardrop.

jbutler483 08 июнь 2015, в 15:48

9

Все это кажется очень ... многословным. Решение JS особенно абсурдно.
egid 09 июнь 2015, в 04:36
4

@egid: я сказал в своем ответе, что я не создал версию js. Также обратите внимание, что версия js позволяет вам изменять форму во время выполнения
jbutler483 11 июнь 2015, в 16:10

57

IMO для этой формы требуется плавная кривая для обеспечения непрерывности кривой.

Указанная проблема:

Для рассматриваемого вопроса

нельзя использовать гладкие кривые, поскольку контрольные точки не будут иметь одинаковую длину. Но нам все равно нужно, чтобы контрольные точки находились в точности противоположными (180 °) до предыдущих контрольных точек, , чтобы обеспечить полную непрерывность кривой. Ниже приведено изображение, приведенное ниже:

Примечание. Красные и синие кривые представляют собой две различные квадратичные кривые.

stroke-linejoin="miter", для заостренной верхней части.
AS Эта форма использует только последовательные команды c, мы можем ее опустить.

Здесь последний фрагмент:

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

TBH хотя, принятые кривые ответа не совсем непрерывны.

Для IE 5-8 (VML)

Работает только в IE 5-8. VML использует разные команды, чем SVG. Например. он использует v для относительных кубических безьеров.

Примечание. Этот фрагмент не будет запускаться и в IE 5-8. Вам нужно создать html файл и запустить его непосредственно в браузере.

<!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 09 июнь 2015, в 05:32

3

Я не понимаю, почему это не оценено выше. Я нахожу форму так же хорошо, как ответ веб-тики.
Persijn 10 июнь 2015, в 21:25
1

@Persijn web-tiki опубликовал ответ примерно за полдня до того, как я это сделал. так что давайте просто скажем, что я немного опоздал на вечеринку;)
Max Payne 11 июнь 2015, в 06:34
2

@ Гарри, я раньше не замечал эту фигуру! Спасибо! Я отредактировал ответ.
Max Payne 11 июнь 2015, в 06:35
5

Этот ответ очень хорош, особенно объяснение о командах кривой, которые вы использовали, и о том, как их получить. Отличная работа, так держать!
web-tiki 11 июнь 2015, в 08:26
0

"Пожалуйста, избавь меня от тики-бога" золотой: D
Persijn 12 июнь 2015, в 12:47
0

«Гладкие кривые не могут быть использованы, поскольку контрольные точки не будут одинаковой длины». Разве «сглаживание» не означает просто, что касательные ручки (контрольные точки) расположены на прямой линии? Почему они должны быть одинаковой длины?
Niccolo M. 14 июнь 2015, в 13:26
2

@NiccoloM. В svg сглаженная кривая (команды T и S) означает, что дескриптор симметрично противоположен, а также равен длине предыдущего дескриптора . В обычном языке гладкая кривая может означать разные длины дескриптора, но в svg длина также равна предыдущему дескриптору кривых :)
Max Payne 14 июнь 2015, в 14:07

Показать ещё 5 комментариев

40

Если шрифт вашего зрителя поддерживает его, используйте символы Unicode

DROPLET: (`💧`)

или

BLACK DROPLET: ? (`🌢`)

Масштабирование соответственно!

Gnubie 08 июнь 2015, в 19:05

16

Однако при использовании шрифтов могут возникнуть проблемы.
doppelgreener 09 июнь 2015, в 00:18
8

Это выглядит как черный ящик на моем планшете с Firefox.
JonasCz 09 июнь 2015, в 08:57
46

BLACK DROPLET отображается в виде окна в версии Chrome 43.0.2357.81 m Windows 7 32-разрядная версия
user13267 09 июнь 2015, в 10:48
0

Вы можете использовать это с @ font-face, но тогда у вас есть файл шрифта для хранения в нужном месте и тому подобное.
fredsbend 10 июнь 2015, в 05:55
3

SVG и выделенный символ Unicode, как это хорошо. CSS для этого плохо. PNG - это нормально, но не идеально, поскольку это растровая графика. JPG очень плохой, настолько плохой, что у меня будут кошмары, если я его увижу.
Andreas Rejbrand 10 июнь 2015, в 12:34
4

Под Firefox для Linux я ничего не вижу ...
Jeremy Dicaire 10 июнь 2015, в 17:55
0

@AndreasRejbrand PNG в порядке ... если OP строго не запрашивает изображения ...
trejder 11 июнь 2015, в 12:23
0

На Chrome для Linux они отображаются в виде квадратов
nico 11 июнь 2015, в 17:16
0

@AndreasRejbrand 20x20 PNG будет масштабироваться хуже, чем 200x200 JPG. И, с тем же размером, несжатый JPG эквивалентен PNG. Они оба растровые и страдают от одних и тех же проблем.
nico 11 июнь 2015, в 17:18
0

@nico: В теории, да, вы можете использовать JPG с нулевым сжатием. Но в Интернете полно таких бедствий, как эта: en.wikipedia.org/wiki/Atomic_number#/media/…
Andreas Rejbrand 11 июнь 2015, в 23:39

Показать ещё 8 комментариев

27

Холст HTML

Это вариант, открытый в этом потоке. Команды, используемые для чертежей Canvas, очень похожи на SVG (и веб-тики заслуживает кредитов для базовой идеи, используемой в этом ответе).

Форма, о которой идет речь, может быть создана либо с использованием собственных команд кривой (Квадратичный или Безье), либо API-интерфейса Path. Ответ содержит примеры для всех трех методов.

Поддержка браузера Canvas неплохая.

Использование квадратичных кривых

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>

Ниже приведена расширенная версия с заполнением градиента и тенями. Я также включил эффект hover на фигуру, чтобы проиллюстрировать один недостаток Canvas по сравнению с SVG. Холст - это растровый (пиксель) и, следовательно, будет выглядеть размытым/пиксельным при масштабировании за определенную точку. Единственное решение для этого - перекрасить фигуру при каждом изменении размера браузера, что является накладными расходами.

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>

Использование кривых Безье

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>

Использование API путей API

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>

^{Примечание. Как уже упоминалось в моем андре здесь, API-интерфейс Path API еще не поддерживается IE и Safari.}

Дальнейшее чтение:

Harry 10 июнь 2015, в 08:06

1

Хороший ответ холст :) Спасибо Гарри
Persijn 10 июнь 2015, в 21:26
1

Рад, что вы нашли это полезным @Persijn, но я не думаю, что это добавляет много к этой теме. Это просто еще один вариант.
Harry 10 июнь 2015, в 21:56
0

Я редко вижу ответ холста и его уместность по этому вопросу, поэтому я думаю, что это помогает. Лучше тогда опубликовать самый продвинутый линейный градиент в истории человечества: P
Persijn 10 июнь 2015, в 22:03
0

@Persijn: Ха-ха, я знаю, что вы имеете в виду это . Вы взялись за SVG, поэтому у меня не было другого выбора: D
Harry 11 июнь 2015, в 05:09
0

Я не вижу, как SVG всегда лучший вариант. это, безусловно, лучший вариант во многих случаях, как этот. Но у холста есть свои плюсы. Хороший ответ. из вашего ответа я могу понять, что, конечно, гораздо проще использовать SVG!
Max Payne 11 июнь 2015, в 06:39
0

Да, @TimKrul, проще писать / использовать SVG. У Canvas есть свои плюсы, но из того, что я читал, он не слишком выгоден при использовании простых логотипов, таких как фигуры, в первую очередь потому, что он основан на растре, в отличие от SVG.
Harry 11 июнь 2015, в 06:46

Показать ещё 4 комментария

26

Я лично использовал SVG для этого. Вы можете создавать SVG в большинстве векторных графических программ. Я бы рекомендовал:

Inkscape
Sketch
Adobe Illustrator

Я сделал один ниже, это отслеживание вашей фигуры в 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>

Djave 08 июнь 2015, в 14:32

7

Да, Adobe Illustrator
Djave 08 июнь 2015, в 14:15
2

Inkscape, если вы хотите, чтобы инструмент с открытым исходным кодом работал с SVG.
Nathan 11 июнь 2015, в 13:22
0

Inkscape - определенно лучшая альтернатива Illustrator.
nico 11 июнь 2015, в 17:19

Показать ещё 1 комментарий

23

Я также нашел этот на Codepen, сделанный пользователем Ana Tudor с использованием CSS и стиля box-shadow и параметрических уравнений. Очень простой, очень маленький код. И многие браузеры поддерживают стиль CSS3 Box-shadow:

body {
  background-color: black;
}
.tear {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.125em;
  width: 0.25em;
  height: 0.25em;
  border-radius: 50%;
  box-shadow: 0em -5em red, 0.00118em -4.97592em #ff1800, 0.00937em -4.90393em #ff3000, 0.03125em -4.7847em #ff4800, 0.07283em -4.6194em #ff6000, 0.13915em -4.40961em #ff7800, 0.23408em -4.15735em #ff8f00, 0.36em -3.86505em #ffa700, 0.51777em -3.53553em #ffbf00, 0.70654em -3.17197em gold, 0.92382em -2.77785em #ffef00, 1.16547em -2.35698em #f7ff00, 1.42582em -1.91342em #dfff00, 1.69789em -1.45142em #c7ff00, 1.97361em -0.97545em #afff00, 2.2441em -0.49009em #97ff00, 2.5em 0.0em #80ff00, 2.73182em 0.49009em #68ff00, 2.93032em 0.97545em #50ff00, 3.08681em 1.45142em #38ff00, 3.19358em 1.91342em #20ff00, 3.24414em 2.35698em #08ff00, 3.23352em 2.77785em #00ff10, 3.15851em 3.17197em #00ff28, 3.01777em 3.53553em #00ff40, 2.81196em 3.86505em #00ff58, 2.54377em 4.15735em #00ff70, 2.21783em 4.40961em #00ff87, 1.84059em 4.6194em #00ff9f, 1.42017em 4.7847em #00ffb7, 0.96608em 4.90393em #00ffcf, 0.48891em 4.97592em #00ffe7, 0.0em 5em cyan, -0.48891em 4.97592em #00e7ff, -0.96608em 4.90393em #00cfff, -1.42017em 4.7847em #00b7ff, -1.84059em 4.6194em #009fff, -2.21783em 4.40961em #0087ff, -2.54377em 4.15735em #0070ff, -2.81196em 3.86505em #0058ff, -3.01777em 3.53553em #0040ff, -3.15851em 3.17197em #0028ff, -3.23352em 2.77785em #0010ff, -3.24414em 2.35698em #0800ff, -3.19358em 1.91342em #2000ff, -3.08681em 1.45142em #3800ff, -2.93032em 0.97545em #5000ff, -2.73182em 0.49009em #6800ff, -2.5em 0.0em #7f00ff, -2.2441em -0.49009em #9700ff, -1.97361em -0.97545em #af00ff, -1.69789em -1.45142em #c700ff, -1.42582em -1.91342em #df00ff, -1.16547em -2.35698em #f700ff, -0.92382em -2.77785em #ff00ef, -0.70654em -3.17197em #ff00d7, -0.51777em -3.53553em #ff00bf, -0.36em -3.86505em #ff00a7, -0.23408em -4.15735em #ff008f, -0.13915em -4.40961em #ff0078, -0.07283em -4.6194em #ff0060, -0.03125em -4.7847em #ff0048, -0.00937em -4.90393em #ff0030, -0.00118em -4.97592em #ff0018;
}

<div class="tear"></div>

Luke 08 июнь 2015, в 16:12

6

Хотя это не похоже на то, о чем просят слезинки.
doppelgreener 10 июнь 2015, в 04:53
9

Но оригинал скучен.
COil 10 июнь 2015, в 15:07
1

Я не просил пиксельного идеального ответа. Я считаю этот ответ хорошим и креативным решением :)
Persijn 10 июнь 2015, в 21:24

Показать ещё 1 комментарий

18

Версия CSS

Поскольку здесь представлено несколько небольших ответов, я подумал, почему бы не добавить к нему другой метод. Для создания слезки используется HTML и CSS.

Это позволит вам изменить цвет границы и фона слезы, а также изменить размер верхней части.

Используя один div, мы можем создать круг с border и border-radius. Затем, используя псевдоэлементы (:before и :after), мы создаем треугольник CSS ^{подробнее здесь} это будет действовать как кончик слезы. Используя :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>

Вот демонстрация слезы с цветом фона

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>

Это так же просто, как цвет фона на div и изменение цвета :after bottom-border. Чтобы изменить границу, вам необходимо изменить цвет рамки div и цвет фона :before.

Ruddy 10 июнь 2015, в 08:40

0

У румяного пера отсутствует значение цвета фона.
Persijn 10 июнь 2015, в 08:09
2

@Persijn Гарри что-то сказал в чате, и я смотрел на него на этой ручке, забывая, что время от времени автоматически сохраняет. Ха-ха, я верну все так, как было. Готово.
Ruddy 10 июнь 2015, в 08:10

17

Это очень легко сделать с помощью SVG, просто используя ресурс преобразования изображений, например http://image.online-convert.com/convert-to-svg, который использовался для создания следующего:

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

Anonymous 08 июнь 2015, в 14:50

0

Разве это не скопировано из какого-то редактора?
Persijn 08 июнь 2015, в 14:14
0

@Persijn Да, читайте вверху: «который был использован для создания следующего»
Anonymous 08 июнь 2015, в 14:15
9

@Persijn, почему ты продолжаешь спрашивать, скопировано ли из какого-то редактора? Svg - это svg, вы можете использовать любой инструмент, который хотите создать.
Abhinav Gauniyal 08 июнь 2015, в 15:52
0

@AbhinavGauniyal это сайт кодирования, поэтому я предпочитаю решения, сделанные вручную / закодированы.
Persijn 08 июнь 2015, в 15:56
2

@AbhinavGauniyal: «редакторы», как вы их называете, добавляют дополнительный «пух» к объявлениям. Например, 300.000000pt и метаданные, которые на самом деле не нужны
jbutler483 08 июнь 2015, в 16:06
12

@Persijn, что вы подразумеваете под рукой / закодировано. Кто-то просто сделал / hand / закодированный иллюстратор, чтобы просто облегчить свои задачи кодирования, и он все еще производит то же самое. Опять же, когда вы используете svg в браузере, почему бы вам не написать и не написать код на ассемблере? и зачем останавливаться на сборке, от руки / кодировать его с помощью проводов или просто нарисовать его самостоятельно. Это не та причина, которую я ожидал.
Abhinav Gauniyal 08 июнь 2015, в 16:36
2

@ jbutler483 да и их можно обрезать. Есть много инструментов, которые делают это для вас, вот один для вас github.com/svg/svgo
Abhinav Gauniyal 08 июнь 2015, в 16:38
0

@AbhinavGauniyal Присоединяйтесь ко мне в чате: chat.stackoverflow.com/rooms/69317/css-shapes-and-designs
Persijn 08 июнь 2015, в 18:20
6

@persijn этот ответ предоставляет необходимые пути SVG. Я действительно понятия не имею, каково ваше возражение.
ell 08 июнь 2015, в 19:40

Показать ещё 7 комментариев

13

Если вы предпочитаете использовать SVG, вы должны читать по пути. Я также предлагаю редактор 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>

Brennen Sprimont 08 июнь 2015, в 15:23

1

Зачем вам использовать строку внутри тега defs? И вы не можете сделать эту фигуру в один путь не 3 + прямоугольник?
Persijn 08 июнь 2015, в 14:29

1

Вот четыре прогрессивно более простые формы слезины SVG:

<svg viewbox="-20 -20 180 180">
  <g stroke="black" fill="none">
    
    <path transform="translate(0)"
     d="M   0  0
        C   0 10  10 17  10 27
        C  10 40 -10 40 -10 27
        C -10 17   0 10   0  0
        Z"/>

    <path transform="translate(40)"
     d="M   0  0
        C   0 16  15 25   5 34
        Q   0 38         -5 34
        C -15 25   0 16   0  0
        Z"/>
    
    <path transform="translate(80)"
     d="M   0  0
        C   0 10  18 36   0 36
        S          0 10   0  0
        Z"/>

    <path transform="translate(120)"
     d="M   0  0
        Q  18 36   0 36
        T          0  0
        Z"/>
    
    
    
    
    <g stroke-width="0.25" stroke="red">
      <g transform="translate(0)">
        <ellipse rx="1" ry="1" cx="0"   cy="0" />
        <ellipse rx="1" ry="1" cx="0"   cy="10"/>
        <ellipse rx="1" ry="1" cx="10"  cy="17"/>
        <ellipse rx="1" ry="1" cx="10"  cy="27"/>
        <ellipse rx="1" ry="1" cx="10"  cy="40"/>
        <ellipse rx="1" ry="1" cx="-10" cy="40"/>
        <ellipse rx="1" ry="1" cx="-10" cy="27"/>
        <ellipse rx="1" ry="1" cx="-10" cy="17"/>
        <line x1="0"   y1="0"  x2="0"   y2="10"/>
        <line x1="10"  y1="17" x2="10"  y2="40"/>
        <line x1="-10" y1="40" x2="-10" y2="17"/>
      </g>
      <g transform="translate(40)">
        <ellipse rx="1" ry="1" cx="0"   cy="0" />
        <ellipse rx="1" ry="1" cx="0"   cy="16"/>
        <ellipse rx="1" ry="1" cx="15"  cy="25"/>
        <ellipse rx="1" ry="1" cx="5"   cy="34"/>
        <ellipse rx="1" ry="1" cx="0"   cy="38"/>
        <ellipse rx="1" ry="1" cx="-5"  cy="34"/>
        <ellipse rx="1" ry="1" cx="-15" cy="25"/>
        <line x1="0"  y1="0"  x2="0"   y2="16"/>
        <line x1="15" y1="25" x2="0"   y2="38"/>
        <line x1="0"  y1="38" x2="-15" y2="25"/>
      </g>
      <g transform="translate(80)">
        <ellipse rx="1" ry="1" cx="0"   cy="0" />
        <ellipse rx="1" ry="1" cx="0"   cy="10"/>
        <ellipse rx="1" ry="1" cx="18"  cy="36"/>
        <ellipse rx="1" ry="1" cx="0"   cy="36"/>
        <ellipse rx="1" ry="1" cx="-18" cy="36" stroke="gray"/>
        <line x1="0"  y1="0"  x2="0"   y2="10"/>
        <line x1="18" y1="36" x2="0"   y2="36"/>
        <line x1="0"  y1="36" x2="-18" y2="36" stroke="gray" stroke-dasharray="0.5"/>
      </g>
      <g transform="translate(120)">
        <ellipse rx="1" ry="1" cx="0"   cy="0" />
        <ellipse rx="1" ry="1" cx="18"  cy="36"/>
        <ellipse rx="1" ry="1" cx="0"   cy="36"/>
        <ellipse rx="1" ry="1" cx="-18" cy="36" stroke="gray"/>
        <line x1="18" y1="36" x2="0"   y2="36"/>
        <line x1="0"  y1="36" x2="-18" y2="36" stroke="gray" stroke-dasharray="0.5"/>
      </g>
    </g>    
  </g>
  <g font-size="6" transform="translate(-1.5,-4)">
    <text x="-10" y="-8"># of unique points:</text>
    <text transform="translate(  0)">8</text>
    <text transform="translate( 40)">7</text>
    <text transform="translate( 80)">4</text>
    <text transform="translate(120)">3</text>
  </g>
</svg>

Andrew Willems 08 фев. 2017, в 20:34

Ещё вопросы

Вы можете создать нужную форму здесь (и увидеть код, нажав одну из верхних кнопок): svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html#group
«Я не хочу использовать изображения, потому что они будут размыты при масштабировании», почему вы масштабируете изображение? Они не становятся размытыми, если вы используете [srcset] или элемент <picture> . А еще лучше, просто ссылку на изображение SVG: <img src="tear.svg" alt="Teardrop"/>
@zzzzBov: Вы действительно рекомендуете элемент picture ? Нет поддержки IE, нет поддержки ранних версий Chrome, нет поддержки Safari. Мне продолжать?
@ jbutler483, я рекомендую SVG для этого случая, но после этого, да, я рекомендую элемент <picture> , а также Picturefill и соответствующий запасной вариант noscript .
@zzzzBov. why are you scaling the image? Ну, изображение может выглядеть размытым без масштабирования его разработчиком. Все, что вам для этого нужно, - это увеличение браузера. В моем случае у меня есть экран HighDPI и множество размытых изображений. Так что, да, если вы можете избежать изображений с помощью SVG, сделайте это.
@ Томас Я вижу квадрат: / i.stack.imgur.com/8fXMf.png
Я думаю, что «дроплет» более уместно использовать для заголовка этого вопроса?
@ jbutler483 Возможно, Safari и IE, но кого волнуют ранние версии Chrome? Тем более, что Chrome почти заставляет вас автоматически обновляться.
Семантически и практически, я думаю, вы должны использовать изображение для этого. Но, конечно, вы не должны использовать растровое графическое изображение (не PNG, и определенно не JPG, Боже, нет), а векторное графическое изображение (то есть на практике SVG).
Для достижения этой формы есть преимущества использования css и svg .
@immibis старые мобильные телефоны могут не получать обновления для браузеров
Почему бы не изменить название вопроса на «капля воды»?
@SalmanA ... потому что слезинка - лучшее описание для этой формы. Реальная капля воды (не на поверхности) больше похожа на желе-рыбу без щупалец ... хотя большинство людей признают слезинку символом дождя, это сочетание уловок глаза в быстром движении дождя капля интерполируется к более заметному медленному течению слезинки
@peter Нужна ли нам ссылка на Википедию, чтобы узнать, что такое HTML?
CSS - неподходящий инструмент для работы
@zzzzBov Я не совсем понимаю, как это не тот инструмент, OP попросил решение CSS или SVG, и я придумал решение CSS, которое соответствует описанию настолько близко, насколько это возможно. Его легкий и простой в модификации.
Нигде в вопросе не говорится, что CSS или SVG является требованием. ОП просто опубликовал свои собственные попытки и спросил: «Есть ли способ создать эту фигуру, чтобы ее можно было использовать на HTML-странице?» Этот ответ предполагает использование CSS, который не является подходящим способом создания того, что является семантически изображением.
@zzzzBov Использование CSS для изображений и спрайтов является обычным делом. Это очень минимальный кусок кода для генерации общего «образа». Я считаю, что это уместно, потому что его можно использовать в рамках вопросов, которые можно использовать на веб-странице.
@zzzzBov: CSS отлично подходит для фигур. Кто скажет, для чего используется такая форма? семантически изображение - OP четко заявили, что не хотят использовать изображение, иначе зачем задавать такой вопрос?
@ jbutler483, «CSS отлично подходит для фигур» нет, это ужасно. То, что ты можешь , не означает, что ты должен . Он вводит все виды мусора в разметке и является утомительным беспорядком в обслуживании. Изображения намного проще в обслуживании, так как они легко разделяются на отдельные отдельные файлы.
@zzzzBov: Полагаю, вы просто один из тех людей, которым не нравятся формы. Все в порядке. Но я полагаю, что вы также использовали бы изображение для подобных кругу только потому, что это более «символично». Хотя да, для некоторых элементов изображение будет иметь меньший размер, чем размер файла CSS, но в большинстве случаев зачем добавлять дополнительный вызов http, если вы можете (весьма радостно) уменьшить его, используя короткий фрагмент CSS.
«Мусор в разметке» возникает, когда вы используете начальную загрузку или шрифтовые иконки. Серьезно, я думаю, что вы немного превзойдете подобные моменты, когда (вполне очевидно) это может быть достигнуто с помощью объявления радиуса границы. Но скажите, кто скажет вам не использовать изображения?
@zzzzBov: если это украшение, то вообще не требует разметки; а :before или :after сделаю. Если это контент («семантически изображение»), вы можете использовать соответствующее маленькое изображение и альтернативный текст для отступления (сбой загрузки CSS, пользовательские настройки, доступность) и при этом использовать CSS, чтобы получить что-то, что хорошо масштабируется. SVG также работает, но для выполнения работы нужно всего две линии и дуга в одном штрихе.
CSS может быть полностью правильным решением. @zzzzBov, если бы клиент потребовал нестандартную метку li, то есть галочку, треугольник, что угодно, вы бы использовали изображение? Или вы бы использовали: раньше? Если вы хотите использовать что-то еще, пожалуйста, оставьте комментарий, мне нравится изучать новые методы.
Для CSS это удивительно - но я предпочитаю подход SVG
Я не уверен, почему все здесь упускают суть ... я имею в виду, может быть, это я, но ... вы знаете, без обид, но это совсем не похоже на слезы .
@Lohoris: я забыл, как выглядят слезинки, так как я их давно не видел. Но для капель дождя , я думаю, они довольно близки: P
В соответствии с этим капли дождя имеют форму от сферической до гамбургерной формы, так что это выглядит ближе к каплеобразной капле. Что касается того, подходит ли CSS для этого или нет, это действительно зависит от использования и является полностью субъективным. Поскольку ОП пытался использовать CSS и не указал никаких причин, чтобы дисквалифицировать CSS как допустимое решение, я бы сказал, что CSS - это полностью правильный подход, и, честно говоря, это довольно умное решение. +1 от меня :)
это такой потрясающий ответ. Удивительно, на что способна маленькая перспектива ... если ты способен это увидеть.
Все это кажется очень ... многословным. Решение JS особенно абсурдно.
@egid: я сказал в своем ответе, что я не создал версию js. Также обратите внимание, что версия js позволяет вам изменять форму во время выполнения
Я не понимаю, почему это не оценено выше. Я нахожу форму так же хорошо, как ответ веб-тики.
@Persijn web-tiki опубликовал ответ примерно за полдня до того, как я это сделал. так что давайте просто скажем, что я немного опоздал на вечеринку;)
@ Гарри, я раньше не замечал эту фигуру! Спасибо! Я отредактировал ответ.
Этот ответ очень хорош, особенно объяснение о командах кривой, которые вы использовали, и о том, как их получить. Отличная работа, так держать!
"Пожалуйста, избавь меня от тики-бога" золотой: D
«Гладкие кривые не могут быть использованы, поскольку контрольные точки не будут одинаковой длины». Разве «сглаживание» не означает просто, что касательные ручки (контрольные точки) расположены на прямой линии? Почему они должны быть одинаковой длины?
@NiccoloM. В svg сглаженная кривая (команды T и S) означает, что дескриптор симметрично противоположен, а также равен длине предыдущего дескриптора . В обычном языке гладкая кривая может означать разные длины дескриптора, но в svg длина также равна предыдущему дескриптору кривых :)
Однако при использовании шрифтов могут возникнуть проблемы.
Это выглядит как черный ящик на моем планшете с Firefox.
BLACK DROPLET отображается в виде окна в версии Chrome 43.0.2357.81 m Windows 7 32-разрядная версия
Вы можете использовать это с @ font-face, но тогда у вас есть файл шрифта для хранения в нужном месте и тому подобное.
SVG и выделенный символ Unicode, как это хорошо. CSS для этого плохо. PNG - это нормально, но не идеально, поскольку это растровая графика. JPG очень плохой, настолько плохой, что у меня будут кошмары, если я его увижу.
Под Firefox для Linux я ничего не вижу ...
@AndreasRejbrand PNG в порядке ... если OP строго не запрашивает изображения ...
На Chrome для Linux они отображаются в виде квадратов
@AndreasRejbrand 20x20 PNG будет масштабироваться хуже, чем 200x200 JPG. И, с тем же размером, несжатый JPG эквивалентен PNG. Они оба растровые и страдают от одних и тех же проблем.
@nico: В теории, да, вы можете использовать JPG с нулевым сжатием. Но в Интернете полно таких бедствий, как эта: en.wikipedia.org/wiki/Atomic_number#/media/…
Хороший ответ холст :) Спасибо Гарри
Рад, что вы нашли это полезным @Persijn, но я не думаю, что это добавляет много к этой теме. Это просто еще один вариант.
Я редко вижу ответ холста и его уместность по этому вопросу, поэтому я думаю, что это помогает. Лучше тогда опубликовать самый продвинутый линейный градиент в истории человечества: P
@Persijn: Ха-ха, я знаю, что вы имеете в виду это . Вы взялись за SVG, поэтому у меня не было другого выбора: D
Я не вижу, как SVG всегда лучший вариант. это, безусловно, лучший вариант во многих случаях, как этот. Но у холста есть свои плюсы. Хороший ответ. из вашего ответа я могу понять, что, конечно, гораздо проще использовать SVG!
Да, @TimKrul, проще писать / использовать SVG. У Canvas есть свои плюсы, но из того, что я читал, он не слишком выгоден при использовании простых логотипов, таких как фигуры, в первую очередь потому, что он основан на растре, в отличие от SVG.
Inkscape, если вы хотите, чтобы инструмент с открытым исходным кодом работал с SVG.
Inkscape - определенно лучшая альтернатива Illustrator.
Хотя это не похоже на то, о чем просят слезинки.
Я не просил пиксельного идеального ответа. Я считаю этот ответ хорошим и креативным решением :)
У румяного пера отсутствует значение цвета фона.
@Persijn Гарри что-то сказал в чате, и я смотрел на него на этой ручке, забывая, что время от времени автоматически сохраняет. Ха-ха, я верну все так, как было. Готово.
Разве это не скопировано из какого-то редактора?
@Persijn Да, читайте вверху: «который был использован для создания следующего»
@Persijn, почему ты продолжаешь спрашивать, скопировано ли из какого-то редактора? Svg - это svg, вы можете использовать любой инструмент, который хотите создать.
@AbhinavGauniyal это сайт кодирования, поэтому я предпочитаю решения, сделанные вручную / закодированы.
@AbhinavGauniyal: «редакторы», как вы их называете, добавляют дополнительный «пух» к объявлениям. Например, 300.000000pt и метаданные, которые на самом деле не нужны
@Persijn, что вы подразумеваете под рукой / закодировано. Кто-то просто сделал / hand / закодированный иллюстратор, чтобы просто облегчить свои задачи кодирования, и он все еще производит то же самое. Опять же, когда вы используете svg в браузере, почему бы вам не написать и не написать код на ассемблере? и зачем останавливаться на сборке, от руки / кодировать его с помощью проводов или просто нарисовать его самостоятельно. Это не та причина, которую я ожидал.
@ jbutler483 да и их можно обрезать. Есть много инструментов, которые делают это для вас, вот один для вас github.com/svg/svgo
@AbhinavGauniyal Присоединяйтесь ко мне в чате: chat.stackoverflow.com/rooms/69317/css-shapes-and-designs
@persijn этот ответ предоставляет необходимые пути SVG. Я действительно понятия не имею, каково ваше возражение.
Зачем вам использовать строку внутри тега defs? И вы не можете сделать эту фигуру в один путь не 3 + прямоугольник?

web-tiki · Accepted Answer · 2015-06-08T15-57-00.000Z

Подход SVG:

Вы можете легко получить двойную кривую с помощью встроенного SVG и <path/>, а не элемента <polygon/>, который не позволяет создавать кривые фигуры.

В следующем примере используется элемент <path/> с:

2 квадратные команды кривой безье для 2 верхних кривых (строки, начинающиеся с Q)
1 arc command для большого нижнего (строка начинается с 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>

SVG - отличный инструмент для создания таких форм с двойными кривыми. Вы можете проверить это сообщение о двойных кривых с помощью сравнения SVG/CSS. Некоторые из преимуществ использования SVG в этом случае:

Управление кривой
Контроль заполнения (непрозрачность, цвет)
Управление штрихом (ширина, непрозрачность, цвет)
Количество кода
Время создания и сохранения формы
Масштабируемость
Нет HTTP-запроса (если используется в строке, как в примере)

Поддержка браузера для встроенного SVG возвращается в Internet Explorer 9. Для получения дополнительной информации см. canIuse.

он может уменьшиться до: <svg width="100%" height="100%" viewBox="0 0 8 8" /> <path d="M4 1L3 4A1.2 2 0 1 0 5 4"/> </svg> ... это заполнит область, которую вы ей дадите, поэтому он может сделать "толстые" или "тощие" капли дождя ... при необходимости изменить фиксированную высоту / ширину
@technosaurus Проблема с уменьшением количества команд в атрибуте d="..." заключается в том, что у вас больше нет двойной кривой в верхней части капли.
+1, потому что вы должны использовать SVG для этого, а не CSS. Функции CSS, которые вам понадобятся для достижения этой цели, имеют примерно ту же поддержку браузера, что и SVG, поэтому у CSS нет никаких преимуществ на этот счет. CSS может создавать фигуры, но это не то, для чего он предназначен; не пытайтесь забить гвоздь отверткой только ради того, чтобы быть умным, когда вы можете сделать это точно так же, как с помощью инструмента, предназначенного для этой работы.
Еще лучше: создайте файл SVG и используйте <img /> в гипертекстовом документе.
+1 потому что я плохо разбираюсь в SVG, но это достаточно просто для меня, чтобы понять. Мне тоже нравится, как это выглядит!
@AndreasRejbrand, который может быть хорошей идеей в зависимости от проекта, но добавляет HTTP-запрос, которого OP, кажется, хочет избежать.

Как создать слезу в HTML?

12 ответов

Подход SVG:

Базовый радиус границы

Расширенный радиус границы

Альтернативы

Версия CSS

Версия SVG

Указанная проблема:

Для IE 5-8 (VML)

DROPLET: (&#128167;)

BLACK DROPLET: ? (&#127778;)

Холст HTML

Использование квадратичных кривых

Использование кривых Безье

Использование API путей API

Версия CSS

Ещё вопросы

DROPLET: (`💧`)

BLACK DROPLET: ? (`🌢`)