McDonalds Logo In 2 HTML Elements — Second Element Is *Not* The Second Arch!

This is part two of my 1 HTML logo creation experiments. In the original article I created the Nike Logo using 1 HTML element.

Grab your copy of CSS Visual Dictionary incl. diagrams of all CSS properties.

That’s right. Both arches are created a single HTML element! This might sound miraculous at first. But…

The basic idea is to use elliptical border-radius by providing two values instead of one. And knowledge of :before and :after pseudo-selectors. Just juggle values and element’s dimensions around until the curve matches the shape you’re looking for. Elliptical border radius is pretty flexible.

Here is the actual result of the CSS posted below:

Image for post
Image for post
This is an actual screenshot of the McDonalds Logo created only 2 HTML elements.

You can see the source code in action at this McDonalds Logo jsFiddle.

This is not the only way to create this logo using only 2 HTML elements. In fact, it is not 100% accurate. However, it is possible to achieve exact precision of the actual McDonalds logo by using a slightly different technique (still using 2 HTML elements though, by masking out negative space with :before and :after pseudo-selectors in the same way as I have done in my other similar tutorial where I made the Nike logo using only 1 element.)

/* yellow background */.A {
position: absolute;
top: 32px;
width: 535px;
height: 430px;
background: yellow; }
/* left arch: */.A:before {
content: "";
position: absolute;
top: 10px;
left: 55px;
width: 135px;
height: 350px;
border: 52px solid red;
border-top-left-radius: 280px 900px;
border-top-right-radius: 280px 900px;
border-bottom: 0;
}
/* right arch: */.A:after {
content: "";
position: absolute;
top: 10px;
left: 245px;
width: 135px;
height: 350px;
border: 52px solid red;
border-top-left-radius: 280px 900px;
border-top-right-radius: 280px 900px;
border-bottom: 0;
}
.B { /* This is for blocking out a white square at the bottom */
position: absolute;
top: 350px;
left: 230px;
width: 85px;
height: 95px;
background: yellow;
}
.B:before { /* This is just for the "R" inside the circle */
content: "R";
font-family: Arial;
border: 2px solid black;
position: absolute;
top: 15px;
left: 24px;
border-radius: 100px;
width: 40px;
height: 40px;
text-align: center;
line-height: 43px;
}

And the HTML — as promised — consists of only 2 div elements:

<div class = "A"></div>
<div class = "B"></div> <!-- not the second arch //-->

If you want to create similar art or lessen UI bandwidth, look into pseudo-selectors :before and :after that actually get you 3 HTML elements in 1.

In some UI layouts, having 3 extra elements “for free” might become important in simplifying the DOM while saving the bandwidth.

Issues. Every webdev has them. Published author of CSS Visual Dictionary https://amzn.to/2JMWQP3 few others…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store