How to make an apple with only CSS

[INTRODUCTION] Hi! You might have seen I’ve been building a new project – a farm made with Vue! On it, I’m trying to use HTML and CSS to create and style all farm items such as vegetables, fruits, animals, backgrounds and so much more. As the project has now progressed further, I am able to share how I’ve made some of them ?

Let’s see how to create an apple using only HTML and CSS:

• We need to imagine the apple as a thing made up of other small things and try to plan how do they all fit nicely together. For example, if we split the apple in two then we’d have left half and right half. We’d also find the stem which would now count three items we’d need to make.
  

<section>
  <div class="apple-wrapper">
    <!-- this is where we will place our apple parts -->
  </div>
</section>

• First we make a ‘wrapper’ to hold all of our apple parts we’ve just identified and then we proceed to make each one of them separately. Let’s start by making the left and right half of the split apple from a minute ago.
  

<section>
  <div class="apple-wrapper">
      <div class="apple">
          <div class="apple-left"></div>
          <div class="apple-right"></div>
      </div>
  </div>
</section>

Now we’ve built the HTML part (the ‘wrapper’, the apple itself, both halves), we can add the styling
and make it into its reckognisable apple shape ?

.apple-wrapper {
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center; 
}

.apple {
    display: flex;
    cursor: pointer; 
}

.apple-left {
  width: 25px;
  height: 35px;
  background: #f54b40;

  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-top-right-radius: 50%;

  position: relative;
  left: 5px;

  z-index: 1;
}

.apple-right {
  width: 25px;
  height: 35px;
  background: #f54b40;

  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  border-top-left-radius: 50%;

  z-index: 1;
  position: relative;
  right: 5px;
}

The main part you need to pay attention to are the ‘border-top-right-radius’, ‘border-bottom-right-radius’,
and ‘border-top-left-radius’. This is how we made the apple halves look the way we wanted them to look.
The rest of the added styles are mainly for positioning and making sure we know which element should
‘be the top one’ with ‘z-index’.

• Now we’ve got our apple shape, we’re going to be creating a stem and a little shiny bit to make it
  all look nicer ✨
  
  So let’s make the stem first:
  

 <div class="apple-wrapper">
  <!-- APPLE STEM -->
    <div class="stem"></div>
    <!-- APPLE -->
     <div class="apple">
          <div class="apple-left"></div>
          <div class="apple-right"></div>
     </div>
</div>

.stem {
    background: #175638;
    width: 4px;
    height: 12px;
    z-index: 1;
    position: relative;
    top: 4px;
}

There we go ✨ We’ve got ourselves a good looking apple ?
But can we make it better?

Let’s add the ‘shiny bit’ ?

 <div class="apple-wrapper">
  <!-- APPLE STEM -->
    <div class="stem"></div>
    <!-- APPLE -->
     <div class="apple">
          <div class="apple-left"></div>
          <div class="apple-right"></div>

          <!-- APPLE SHINE -->
          <div class="apple-shine"></div>
     </div>
</div>

.apple-shine {
    background: white;

    border-top-right-radius: 10px;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;

    width: 5px;
    height: 10px;
    z-index: 1;

    transform: rotate(-45deg);

    position: relative;
    right: 18px;
    top: 5px;
}

And that’s it…Well done! We have a nice looking apple ?

If the post was a bit too long to read, you can have a play on codepen instead ?

See the Pen CSS | Apple with a stem by Likii (@likiipedia) on CodePen.