CODEWITHSUNDEEP
htmlcsscss-shapes
Renan Ventura
Renan Ventura

Reputation: 39

How to draw a drop like shape using CSS?

I want to draw these shapes using CSS and I'm having a bit of trouble

Shapes

I'm trying the way above:

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

Upvotes: 1

Views: 831

Answers (3)

Waruyama
Waruyama

Reputation: 3533

If you can live with SVG you can do it like this, even animated:

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>

Upvotes: 0

andreas
andreas

Reputation: 16936

If you really want a CSS only solution, you can create black circles with your border-radius: 50%; approach, combine them with a black rectangle and simulate the round cut-out on both sides with white circles. This is how it works:

enter image description here

The single circle elements can be created using the pseudo elements ::before and ::after. With some positioning, the circles position can be adjusted properly.

This is a working example:

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

Although this is nearly perfect, I would recommend using SVG for this problem, as you can create a smooth outline and you don't have to bother with positioning, sizes and responsive design.

Upvotes: 4

Daniel Gonzalez
Daniel Gonzalez

Reputation: 162

This would be extremely difficult using CSS but there are other solutions. You can attempt to draw them using JavaScript and the HTML5 Canvas element. Or the easier solution would be to create the illustration in a program like Adobe Illustrator, export the image as an SVG file. Get the SVG code from the file (Adobe Illustrator does that for you), it is basically contains the path of the vector. You can then add all the information in an SVG HTML tag and view the element. CSS then allows you to interact with the SVG element.

Upvotes: 0

Related Questions