The original link: www.lesscake.com/cheeseburge…

I like to challenge myself with weird programming ideas. It’s a great way to have fun and learn new things. The challenge is to draw a cheeseburger in CSS using an empty div.

After a lot of trial and error, I ended up with this.

It may not be the best-looking burger ever, but it’s the most impressive to me. This shows that it is possible to draw something as complex as this with a single div.

In this article, we’ll take steps to make the cheeseburger.

HTML

HTML is very short: a character set, a title, a link to a CSS file, and a div.

<! DOCTYPE HTML> <HTML> <HEAD> <meta charset = "UTF-8" > <TITLE> Cheesburger </ TITLE> <link rel = "stylesheet" href = "style.css. CSS" / > < / HEAD > < BODY > < div class = "burger" > < / div > < / BODY > < / HTML >Copy the code

That’s all! Now we’ll focus on the style.css file.

CSS

The basic CSS for a hamburger might look something like this.

.burger {/ * Contains all parts of the burger * / / * Buns, cheese, meat, lettuce and sesame * /}Copy the code

But this is too limited, and we won’t be able to fit an entire burger in a single selector. To find more space, we should use: before and: after pseudo-elements.

.burger {/* Cheese, meat, lettuce */}. Burger :before {/* bread */}. Burger :after {/* sesame */}Copy the code

This may not seem like much, but it’s enough for our purposes.

bread

The bun is made up of two parts: the top layer and the bottom layer. So we had to find a way to draw 2 different shapes in one CSS selector, which wasn’t complicated.

We first draw two rectangles using the border property.

.burger:before {
  content: ""; display: block; /* Width: 400px; height: 55px; Border-top: 80px solid /* top: 80px solid#f5b230;/* border-bottom: 50px solid#f5b230;
}
Copy the code

Then we use border-radius to bend the bread nicely.

.burger:before {/* Same code as before */ content:""; 
  display: block;
  width: 400px;
  height: 55px;
  border-top: 80px solid #f5b230;
  border-bottom: 50px solid #f5b230;/* new content */ border-radius: 30% 30% 20% 20%; }Copy the code

seasoning

Next, we’ll add the main burger ingredients: cheese, meat and lettuce. This time we need to put three shapes in a CSS selector.

Let’s focus on the meat right now.

.burger {/* size */ width: 380px; height: 40px; /* Color and shape */ background-color:#681f24;
  border-radius: 15px; 
}


Copy the code

Well, that’s not very good, there’s some meat, but it’s not in the right place. Unfortunately, we can’t use margin or padding to solve this problem because it moves the entire burger, not just the steak.

Try something different: Draw meat with box-shadow.

.burger {/ * Same as before * / / * we just removed the background color * / width: 380px; height: 40px; border-radius: 15px; /* New content */ /* Parameters left margin, top margin, color */ box-shadow: 10px 85px#681f24; 
}
Copy the code

It works! However, we face another problem: how do we add cheese and lettuce in the same CSS selector? To solve this problem, we need to confirm two things:

  • Meat, cheese and lettuce can have the same shape as long as they are different colors.
  • inCSSWe can use as many box shadows as we need.

So… We just need to add more box shadows!

.burger {/* Same code as before */ width: 380px; height: 40px; border-radius: 15px; /* New box shadow */ box-shadow: 10px 50px#fddb28, /* Cheese */ 10px 85px#681f24, /* Meat */ 10px 120px#82af15; /* * */}Copy the code

Note that the order of the shadows is important because the first shadow is in front of the other shadows.

sesame

Our burger is taking shape, but it currently looks a lot like a hot dog. We should solve this problem by adding some sesame seeds to the top bread.

First, we draw a sesame seed with box-shadow.

.burger:after {
  content: ""; display: block; /* Width: 10px; height: 6px; border-radius: 40%; /* Position and color */ box-shadow: 100px-165px#ffffff;
}
Copy the code

We then duplicate it by using many box shadows.

.burger:after {/* Keep the previous code */ content:""; display: block; width: 10px; height: 6px; border-radius: 40%; /* Add a new box shadow */ box-shadow: /* top line */ 100px-165px#ffffff,
      160px -165px #ffffff,
      230px -165px #ffffff,
      290px -165px #ffffff,/* Bottom line */ 60px-135px#ffffff,
      125px -135px #ffffff,
      190px -135px #ffffff,
      255px -135px #ffffff,
      330px -135px #ffffff;
}
Copy the code

Better looking cheese

It would be nice if we could make cheese look more like cheese. For example, by showing a corner of a cheese slice. This means that even after using all CSS selectors, we still have to draw a new shape (a yellow triangle).

If we take a closer look at our code, we’ll notice that we haven’t used the Content property yet. Let’s see what happens when we add the character ▾ to it.

.burger:before {/* Change the content tag */ content:"▾"; /* ▾ color and size */ color:#fddb28;font-size: 120px; /* keep everything else the same */}Copy the code

margin
padding

But with a few CSS tricks, we’ll get it done.

.burger:before {/* Add eight Spaces to the triangle */ content:"▾"; /* Whitespace will show up in content */ white-space: pre; ▾ */ line-height: 25px; /* leave everything else unchanged */}Copy the code

Now we’re done with our cheeseburger.

eggs

When I emailed my friend about my challenge, she had this clever answer.

.burger:before {
  content: "🍔";
  font-size: 100px;
}
Copy the code

This reduces CSS for better results.

conclusion

I was impressed with what I managed to accomplish with a single div and some CSS. Of course it would make more sense to use SVG, but where’s the fun in that?