How to draw a banana with CSS
Tags: banana, css, html, howto
Published: 2020-10-22 20:59:48

Hi. My name is Marian and this is my first post on dev.to! I wanted to start with something light, so here is a floating banana made only with Html and CSS.

![banana](https://dev-to-uploads.s3.amazonaws.com/i/f2k30fisufxctqrsj3ih.gif)

### The Background
To get started I first added a blue background to the page and added a container to be able to position the banana.

**Html**
```
  <div class="page">
    <div class="container">
    </div>
  </div>
```

**CSS**
```
.page {
  width: 960px;
  padding: 50px 50px;
  margin: 30px auto;
  border-radius: 2%;
  background-color: #81e4e4;     /*light blue*/
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
}

.container {
  width: 500px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
  position: relative;
}
```


### The Body
The body of the banana consists of two rectangles with rounded borders. 

One of the rectangles is yellow and forms the body of the banana, the other has the same color as the background and creates the bend of the banana.

Both rectangles have width=0. What we see on the screen is only the border.

(For illustration I changed the color of the outline to black in the screenshot).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zy1zcqclb83q41p3ndpu.png)

**Html**
```
<div class="page">
    <div class="container">
      <div class="banana">
        <div class="banana-body">
          <div class="banana-outline"></div>
        </div>
      </div>
    </div>
  </div>
```

**CSS**
```
.container {
  width: 500px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
  position: relative;
}

.banana {
  height: 500px;
  width: 500px;
  top: 80px;
  position: relative;
}

.banana-body {
  height: 80%;
  width: 0px;
  top: 50px;
  left: 160px;
  border-right: 180px solid #ecec13;    /* yellow */
  border-radius: 0 150px 150px 0%;
  position: absolute;
  transform: rotate(15deg);
}

.banana-outline {
  height: 120%;
  width: 0px;
  top: -20px;
  left: -50px;
  border-top: 30px solid transparent;
  border-right: 120px solid #81e4e4;  /* light blue  */
  border-radius: 0 120px 120px 0%;
  position: absolute;
}
```

## The Eyes
The eyes consist of two big white circles and two small black circles. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cyr4k0f9pfhigfxl5zah.png)

**Html**
```
<div class="page">
    <div class="container">
      <div class="banana">
        <div class="banana-body">
          <div class="banana-outline"></div>
        </div>
        <div class="banana-eyes">
          <div class="banana-left-eye"></div>
          <div class="banana-right-eye"></div>
        </div>
      </div>
    </div>
  </div>
```
**CSS**
```
.banana-left-eye {
  width: 90px;
  height: 90px;
  border: 5px solid #e6e619;      /* yellow */
  background: #FFFFFF;
  border-radius: 50%;
  position: absolute;
  top: 180px;
  left: 200px;
}

.banana-left-eye::after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #000000;
  width: 35px;
  height: 35px;
  left: 30px;
  top: 30px;
}

.banana-right-eye {
  width: 90px;
  height: 90px;
  border: 5px solid #e6e619;      /* yellow */
  background: #FFFFFF;
  border-radius: 50%;
  position: absolute;
  top: 180px;
  left: 290px;
}

.banana-right-eye::after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #000000;
  width: 35px;
  height: 35px;
  left: 30px;
  top: 30px;
}
```

### The Mouth
The mouth is another rectangle with rounded border. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jzpsv6n2hleixxut4wf0.png)

**Html**
```
  <div class="page">
    <div class="container">
      <div class="banana">
        <div class="banana-body">
          <div class="banana-outline"></div>
        </div>
        <div class="banana-eyes">
          <div class="banana-left-eye"></div>
          <div class="banana-right-eye"></div>
        </div>
        <div class="banana-mouth"></div>
      </div>
    </div>
  </div>
```

**CSS**
```
.banana-mouth {
  width: 30px;
  height: 20px;
  border-radius: 0 0 5em 5em;
  border-bottom: 5px solid #675340; /* dark outline */
  border-right: 5px solid #675340; /* dark outline */
  border-left: 5px solid #675340; /* dark outline */
  position: absolute;
  left: 270px;
  top: 270px;
}
```

### The banana ends

The banana doesn't look very banana-ey yet, so let's also add top- and bottom end.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pfzh4nchcbi35vjwd70a.png)

**Html**
```
  <div class="page">
    <div class="container">
      <div class="banana">
        <div class="banana-body">
          <div class="banana-outline"></div>
        </div>
        <div class="banana-end"></div>
        <div class="banana-top"></div>
        <div class="banana-eyes">
          <div class="banana-left-eye"></div>
          <div class="banana-right-eye"></div>
        </div>
        <div class="banana-mouth"></div>
      </div>
    </div>
  </div>
```

**CSS**
```
.banana-end {
  width: 10px;
  height: 15px;
  border-radius: 0 0 3em 3em;
  background: #996633;            /* brown */
  position: absolute;
  transform: rotate(65deg);
  bottom: 60px;
  left: 160px;
}

.banana-top {
  width: 35px;
  height: 12px;
  background: #4d9933;            /* green */
  position: absolute;
  transform: rotate(25deg);
  border-radius: 50% 0 0 50%;
  top: 33px;
  left: 210px;
}
```

### Make it float!

Since the banana floats above the ground, we should add a shadow. It's hard to be completely still while floating, so let's also animate it.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2916pbqkvr9zl8g041ro.gif)

**Html**
```
  <div class="page">
    <div class="container">
      <div class="banana">
        <div class="banana-body">
          <div class="banana-outline"></div>
        </div>
        <div class="banana-end"></div>
        <div class="banana-top"></div>
        <div class="banana-eyes">
          <div class="banana-left-eye"></div>
          <div class="banana-right-eye"></div>
        </div>
        <div class="banana-mouth"></div>
      </div>
      <div class="banana-float"></div>
    </div>
  </div>
```

**CSS**
```
/* we created this class at the beginning and only have to add the new items here */
.banana { 
  height: 500px;
  width: 500px;
  top: 80px;
  position: relative;
  animation-name: float; /* NEW */ 
  animation-duration: 5s; /* NEW */
  animation-iteration-count: infinite; /* NEW */
  animation-timing-function: ease; /* NEW */
}
.banana-float {
  width: 350px;
  height: 10px;
  border-radius: 50%;
  background-color: #868679;
  position: relative;
  top: 330px;
  left: -150px;
}

@keyframes float {
  0%, 100% {
    top: 80px;
  }

  50% {
    top: 70px;
  }
}
```

### BONUS - Animate the eyes
Let's also animate the eyes to make it look even more silly.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hsku5ra2ndte2ysj9qp6.gif)

**CSS**
```
/* add the animation to the eyes*/
.banana-right-eye::after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #000000;
  width: 35px;
  height: 35px;
  left: 30px;
  top: 30px;
  animation: eyes 2s infinite; /* NEW */
}
.banana-left-eye::after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #000000;
  width: 35px;
  height: 35px;
  left: 30px;
  top: 30px;
  animation: eyes 2s infinite; /* NEW */
}

@keyframes eyes {

  0%, 50%, 100% {
    left: 30px;
  }

  25% {
    left: 20px;
  }

75% {
  left: 40px;
}

}
```


### One Last Thing
If you made it until here, well done and thank you so much!
I originally made this when I started coding and wanted to get better at CSS. I even created a repository on GitHub at the time to collect my drawings. [https://github.com/mrnbck/drawing-with-css](https://github.com/mrnbck/drawing-with-css)

Whether you are new to web development or just enjoy drawing with CSS, I would love to see more contributions to the repo. If you are not finished with Hacktoberfest yet, it might even count towards your Pull Requests :)