DEV Community

Cover image for How to draw a banana with CSS
Marian
Marian

Posted on

How to draw a banana with CSS

#banana #css #html #howto

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

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Html

<div class="page">
    <div class="container">
      <div class="banana">
        <div class="banana-body">
          <div class="banana-outline"></div>
        </div>
      </div>
    </div>
  </div>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

The Eyes

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

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

The Mouth

The mouth is another rectangle with rounded border.
Alt Text

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

The banana ends

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

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

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>
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

BONUS - Animate the eyes

Let's also animate the eyes to make it look even more silly.

Alt Text

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

}
Enter fullscreen mode Exit fullscreen mode

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

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 :)

Top comments (12)

Collapse
 
andrewgilliland profile image
Andrew Gilliland •

I love bananas! Thank you for making this delightful css creation.

Collapse
 
jana profile image
Jana •

I just started to learn css and I would NEVER imagine that you could use it to draw. It is just amazing

Collapse
 
isarisariver profile image
Marian •

Yes, it's amazing. I thought exactly the same when I saw something like this for the first time! It helped me so much to get used to CSS and all the different properties. Search for "pure css" on Codepen for much, much better examples of what can be done with CSS. I love this one codepen.io/miocene/pen/mjLPVp

Collapse
 
jana profile image
Jana •

Thank you for your dancing banana

Collapse
 
aftabksyed profile image
Aftab Syed •

Love the CSS banana 🍌 Specially the eye animations 👀

Collapse
 
andrewchmr profile image
Andriy Chemerynskiy •

But can you do it in a single div? ( ͡° ͜ʖ ͡°)

Collapse
 
isarisariver profile image
Marian •

I'll have to google it ( ͡~ ͜ʖ ͡°)

Collapse
 
sirjson profile image
Raffael Zica •

Since we have the technology for a banana, when will we finally be able to do this in CSS? media.giphy.com/media/qr093KEQQE5T...

Collapse
 
isarisariver profile image
Marian •

I'd love to see that. Shouldn't be too hard :)

View full discussion (12 comments)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Read next

aepasahan profile image

Combining Flexbox and Grid for a Personal Website Landing Page

Ahmet Erkan Paşahan -

kaja_uvais_a8691e947dd399 profile image

How to make Image rotate on hover using HTML and CSS

Kaja Uvais -

ibn_abubakre profile image

Pausing, Stopping, and Hiding Animations with animation-play-state

Abdulqudus Abubakre -

codewithshahan profile image

Heartfelt Timer App with HTML/CSS/JS Only!

Programming with Shahan -