223

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

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

Форма капли мне нужно сделать с помощью HTML, CSS или SVG

Я попробовал с 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-странице?

html css svg css-shapes Persijn
источник

12

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

zzzzBov

32

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

jbutler483

9

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

Нолонар

63

Юникод решает все это ... U + 1F4A7 Thomas

Томас Веллер

21

@ Томас Я вижу квадрат: / i.stack.imgur.com/8fXMf.png

user000001

327

SVG подход:

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

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

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

технозавр

1

@technosaurus проблема с уменьшением количества команд в d="..."атрибуте состоит в том, что у вас больше нет двойной кривой в верхней части капли.

веб-тики

10

+1, потому что вы должны использовать SVG для этого, а не CSS. Функции CSS, которые вам понадобятся для достижения этой цели, имеют примерно ту же поддержку браузера, что и SVG, поэтому у CSS нет никаких преимуществ на этот счет. CSS может создавать фигуры, но это не то, для чего он предназначен; не пытайтесь забить гвоздь отверткой просто для того, чтобы быть умным, когда вы можете сделать это точно так же, как с помощью инструмента, предназначенного для этой работы.

Симба

6

Еще лучше: создайте файл SVG и используйте его <img />в гипертекстовом документе.

Андреас Рейбранд

@AndreasRejbrand, который может быть хорошей идеей в зависимости от проекта, но добавляет HTTP-запрос, которого OP, кажется, хочет избежать.

веб-тики

136

Базовый радиус-радиус

Вы можете сделать это в CSS относительно легко, используя border-radius и преобразования. Ваш 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
источник

4

@zzzzBov Я не совсем понимаю, как это не тот инструмент, OP попросил решение CSS или SVG, и я придумал решение CSS, которое соответствует описанию как можно ближе. Его легкий и простой в модификации.

Стюартсайд

12

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

Стюартсайд

13

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

jbutler483

46

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

zzzzBov

19

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

jbutler483

88

Ваша основная проблема с вашим кодом 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 на codepen.

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

Показать фрагмент кода

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

Развернуть фрагмент

Отказ от ответственности Я не писал вышеупомянутую ручку, только поставил ее.

Версия 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значения, вы сможете изменить форму вашего дизайна слезинки.

jbutler483
источник

10

Все это кажется очень ... многословным. Решение JS особенно абсурдно.

egid

4

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

jbutler483

55

ИМО эта форма требует гладкой кривой- Безье, чтобы обеспечить непрерывность кривой.

Капля в вопросе:

Для падения,

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

введите описание изображения здесь
Примечание . Красные и синие кривые - это две разные квадратичные кривые.

stroke-linejoin="miter", для остроконечной верхней части.
Поскольку эта форма использует только последовательные 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>

Макс Пэйн
источник

«Гладкие кривые не могут быть использованы, поскольку контрольные точки не будут одинаковой длины». Разве «сглаживание» не означает, что касательные ручки (контрольные точки) расположены на прямой линии? Почему они должны быть одинаковой длины?

Никколо М.

2

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

Макс Пейн

42

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

КАПЕЛЬ: 💧 ( `💧`)

или

ЧЕРНАЯ КАПЛЯ: 🌢 ( `🌢`)

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

Gnubie
источник

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

1934286

3

SVG и выделенный символ Unicode, как это хорошо. CSS для этого плохо. PNG - это нормально, но не идеально, поскольку это растровая графика. JPG очень плохой, настолько плохой, что у меня будут кошмары, если я его увижу.

Андреас Рейбранд

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

Нико

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

Андреас Рейбранд,

28

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

Inkscape
эскиз
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
источник

27

HTML Canvas

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

Соответствующая фигура может быть создана либо с помощью собственных кривых команды Canvas (Quadratic или Bezier), либо с помощью 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>

Развернуть фрагмент

Использование Path 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>

Развернуть фрагмент

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

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

Гарри
источник

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

Макс Пейн

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

Гарри

25

Я также нашел это на 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>

Развернуть фрагмент

Люк Шимкус
источник

7

Хотя это не похоже на то, о чем просятся слезинки.

двойник

20

Версия 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фона.

румяный
источник

У румяного пера отсутствует значение цвета фона.

Persijn

2

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

Радди

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>

Развернуть фрагмент

анонимное
источник

9

@Persijn, почему ты продолжаешь спрашивать, скопировано ли из какого-то редактора? SVG это SVG, вы можете использовать любой инструмент, который вы хотите создать.

Абхинав Гауниал,

2

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

jbutler483

12

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

Абхинав Гауниял,

2

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

Абхинав Гауниял

6

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

user428517

14

Если вы решите использовать 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>

Развернуть фрагмент

Бреннен Спримонт
источник

1

Зачем вам использовать строку внутри тега defs? И вы не можете сделать эту фигуру в один путь не 3 + прямоугольник?

Persijn

6

Вот четыре более простых формы слезы 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>

Развернуть фрагмент

Эндрю Виллемс
источник

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

Ответы:

SVG подход:

Базовый радиус-радиус

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

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

Версия CSS

Версия SVG

Капля в вопросе:

Для IE 5-8 (VML)

КАПЕЛЬ: 💧 ( `💧`)

ЧЕРНАЯ КАПЛЯ: 🌢 ( `🌢`)

HTML Canvas

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

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

Использование Path API

Версия CSS

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

Ответы:

SVG подход:

Базовый радиус-радиус

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

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

Версия CSS

Версия SVG

Капля в вопросе:

Для IE 5-8 (VML)

КАПЕЛЬ: 💧 ( &#128167;)

ЧЕРНАЯ КАПЛЯ: 🌢 ( &#127778;)

HTML Canvas

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

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

Использование Path API

Версия CSS

КАПЕЛЬ: 💧 ( `💧`)

ЧЕРНАЯ КАПЛЯ: 🌢 ( `🌢`)