Как сделать на CSS выпуклый эффект (как капля)?

Question

В фигме это сделали маской с радиусом в 30пиксл у картинки. Когда кружок попадает на нее, то все ее углы вокруг сами скругляются. Как можно это сделать на css? У меня только одна идея, что делать СВГ изображение этой фигуры и заливать фоном для кнопки. Что можете подсказать?

Answer 1

Для создания геометрических фигур наиболее подходит векторный редактор.

Графика на веб страницах должна быть векторной.

Освоить векторный редактор для создания различных контуров не составляет труда.

Пошагово:

Загружаете изображение в векторный редактор, например Inkscape

С помощью инструмента: "Рисовать кривые Безье и прямые линии" shift+F6 наносите по контуру узловые точки.
С помощью рычагов узловых точек совмещаете кривую с контуром фигуры на рисунке.
Сохраняете файл в формате *.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.1"
   width="561"
   height="394"
   viewBox="0 0 561 394"
   preserveAspectRatio="xMinYMin meet"
   style="border:1px solid red;"
   id="svg4"
   sodipodi:docname="кнопка-ink.svg"
   inkscape:version="0.92.3 (2405546, 2018-03-11)">
  <metadata
     id="metadata10">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs8" />
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1440"
     inkscape:window-height="837"
     id="namedview6"
     showgrid="false"
     showguides="true"
     inkscape:guide-bbox="true"
     inkscape:zoom="3.3883695"
     inkscape:cx="487.04559"
     inkscape:cy="272.08345"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg4">
    <sodipodi:guide
       position="535.90678,196.16525"
       orientation="0,1"
       id="guide817"
       inkscape:locked="false" />
    <sodipodi:guide
       position="313.86441,322.21186"
       orientation="1,0"
       id="guide819"
       inkscape:locked="false" />
    <sodipodi:guide
       position="441.58051,393.16525"
       orientation="0,1"
       id="guide821"
       inkscape:locked="false" />
    <sodipodi:guide
       position="449.92797,-0.83474576"
       orientation="0,1"
       id="guide823"
       inkscape:locked="false" />
    <sodipodi:guide
       position="4.7220351,436.78825"
       orientation="1,0"
       id="guide825"
       inkscape:locked="false" />
    <sodipodi:guide
       position="559.56116,407.27553"
       orientation="1,0"
       id="guide827"
       inkscape:locked="false" />
    <sodipodi:guide
       position="539.24576,218.70339"
       orientation="0,1"
       id="guide831"
       inkscape:locked="false" />
    <sodipodi:guide
       position="448.25847,250.42373"
       orientation="0,1"
       id="guide833"
       inkscape:locked="false" />
    <sodipodi:guide
       position="404.43432,288.82203"
       orientation="0,1"
       id="guide835"
       inkscape:locked="false" />
  </sodipodi:namedview>
 
  <path
     style="fill:none;stroke:black;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
     d="m 4.7220351,197.83475 0,-197 554.8391249,0 0,197 c 0,0 -25.04541,2.18427 -37.01031,-0.83475 -14.84105,-3.74474 -28.46064,-11.95355 -40.90254,-20.86864 -11.67619,-8.36643 -20.99308,-19.63603 -30.8856,-30.05085 -12.4926,-13.15217 -19.38604,-26.0752 -35.89406,-40.90254 -59.3509,-48.473853 -130.66877,-56.125773 -200.07175,-4.35998 -11.41636,12.93786 -25.14329,29.46506 -37.8308,42.75828 -11.62036,15.78127 -49.17089,49.94618 -73.45763,53.42373 -4.484474,0.11713 -9.731998,0.20139 -15.440139,0.2597 -34.971917,0.35722 -83.3462959,0.57505 -83.3462959,0.57505 z"
     id="path829"
     inkscape:connector-curvature="0"
     sodipodi:nodetypes="ccccaaaccccsc" />
</svg>

Оптимизируете с помощью SVGOMG
Контур готов! width="561" height="394"

<svg xmlns="http://www.w3.org/2000/svg" width="561" height="394" preserveAspectRatio="xMinYMin meet" style="border:0px solid red">
  <path style="fill:#343746;stroke:#000;stroke-width:2;" d="M4.7 197.8V.8h554.9v197s-25 2.2-37-.8c-14.9-3.7-28.5-12-41-20.9-11.6-8.3-21-19.6-30.8-30-12.5-13.2-19.4-26-36-41-59.3-48.4-130.6-56-200-4.3-11.4 13-25.1 29.5-37.8 42.8-11.7 15.8-49.2 50-73.5 53.4l-15.4.3-83.4.5z"/> 
  </svg>

width="112.2" height="78.8"

<svg xmlns="http://www.w3.org/2000/svg" width="112.2" height="78.8" viewBox="0 0 561 394" preserveAspectRatio="xMinYMin meet" style="border:1px solid red">
  <path style="fill:#343746;stroke:#000;stroke-width:2;" d="M4.7 197.8V.8h554.9v197s-25 2.2-37-.8c-14.9-3.7-28.5-12-41-20.9-11.6-8.3-21-19.6-30.8-30-12.5-13.2-19.4-26-36-41-59.3-48.4-130.6-56-200-4.3-11.4 13-25.1 29.5-37.8 42.8-11.7 15.8-49.2 50-73.5 53.4l-15.4.3-83.4.5z"/> 
  </svg>

Answer 2

Я взял исходное изображение, трасировал его стандартными средствами inkscape потом поставил по координатам х=0 y=0 потом подогнал под выделение вставил в svgomg ну и получил вот это

<body style="margin:0; padding:0;">

<svg  viewBox="0 0 230.717 72.509"  xmlns="http://www.w3.org/2000/svg">
<path style="fill:#000" d="M0 36.255V0H230.717v72.496H202.29c-23.827 0-28.717-.062-30.228-.384-8.297-1.765-14.834-6.898-25.797-20.254-2.641-3.218-4.097-4.659-6.77-6.7-14.842-11.332-36.732-10.235-50.201 2.514-1.247 1.18-3.78 4.004-5.628 6.275-4.206 5.168-9.755 10.727-13.03 13.056-2.945 2.095-6.477 3.908-9.254 4.75l-1.984.603-29.7.076L0 72.51Z"/></svg>

БЛОГ НА HUSL

Как сделать на CSS выпуклый эффект (как капля)?

Ответы (2 шт):