Как нарисовать форму капли с помощью CSS? - PullRequest
Новая
       62

Как нарисовать форму капли с помощью CSS?

0 голосов
/ 16 октября 2018

Я хочу нарисовать эти фигуры с помощью CSS, и у меня возникли некоторые проблемы

Shapes

Я пытаюсь сделать это выше:

CSS: 

.menu-animation{
    border-radius: 50%;
    display: inline-block;
    height: 40px;
    width: 40px;
    background-color: #000000;
    position: relative;
    left: 0px;
}
.menu-animation2{
    border-radius: 50%;
    display: inline-block;
    height: 29px;
    width: 23px;
    background-color: #000000;
    position: absolute;
    left: 9px;
    top: 26px;
}

Ответы [ 3 ]

0 голосов
/ 16 октября 2018

Если вам действительно нужно решение только для CSS, вы можете создать черные круги с помощью подхода border-radius: 50%;, объединить их с черным прямоугольником и смоделировать круглый вырез с обеих сторон белыми кругами.Вот как это работает:

enter image description here

Элементы одного круга могут быть созданы с использованием псевдоэлементов ::before и ::after.При некоторых позициях положение кругов можно отрегулировать правильно.

Это рабочий пример: 

.drop {
  background: black;
  margin: 40px;
  height: 20px;
  width: 14px;
  position: relative;
  z-index: 10;
}

.drop::before,
.drop::after {
  content: '';
  position: absolute;
  background: black;
  border-radius: 50%;
}

.drop::before {
  width: 30px;
  height: 30px;
  top: -25px;
  left: -7px;
}

.drop::after {
  width: 20px;
  height: 20px;
  top: 10px;
  left: -3px;
}

.gaps::before,
.gaps::after {
  content: '';
  position: absolute;
  background: white;
  border-radius: 50%;
  z-index: 10;
}

.gaps::before {
  width: 22px;
  height: 22px;
  top: -3px;
  left: -21px;
}

.gaps::after {
  width: 22px;
  height: 22px;
  top: -2px;
  left: 13px;
}
<div class="drop">
  <div class="gaps"></div>
</div>

Хотя это почти идеально, я бы порекомендовал использовать SVG для этой проблемы, поскольку вы можете создать плавный контур и вам не нужно беспокоиться о позиционировании, размеры и отзывчивый дизайн.

0 голосов
/ 16 октября 2018

Если вы можете жить с SVG, вы можете сделать это так, даже анимированный: 

var circle2 = document.getElementById('circle2');

setInterval(function() {
  circle2.style.transition="unset";
  circle2.style.transform = "translate(0, 0)";
  setTimeout(function() {
    circle2.style.transition="transform 1400ms ease-in";
    circle2.style.transform = "translate(0, 230px)";
  }, 0);   
}, 1400);
       
<div style="overflow: hidden">
<svg viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <filter id="goo-filter">
      <feGaussianBlur stdDeviation="8" />  
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"  />
    </filter>
  </defs>  
  <g fill="black" filter="url(#goo-filter)">
    <circle id="circle1" cx="100" cy="40" r="20" />
    <circle id="circle2" cx="100" cy="40" r="12" />
   </g>
</svg>
<div>
0 голосов
/ 16 октября 2018

Это было бы чрезвычайно сложно при использовании CSS, но есть и другие решения.Вы можете попытаться нарисовать их, используя JavaScript и элемент HTML5 Canvas.Или проще было бы создать иллюстрацию в такой программе, как Adobe Illustrator, экспортировать изображение в файл SVG.Получите код SVG из файла (Adobe Illustrator сделает это за вас), он в основном содержит путь вектора.Затем вы можете добавить всю информацию в HTML-тег SVG и просмотреть элемент.Затем CSS позволяет вам взаимодействовать с элементом SVG.

...