DEV Community

Cover image for CSS Logos: daily dev Logo
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

CSS Logos: daily dev Logo

Of course, I couldn't resist recreating my employer's logo in CSS. We are talking, of course, about daily.dev.

The logo itself looks like some basic shapes, as seen below.

daily.dev logo

Analysing the logo

Looking at the logo, we see three distinct parts to it.

  • The square on the left
  • The line in the middle
  • The arrow on the right

Depending on how you look at it, you could see the left part as a d, but that would make things even harder.

There are a couple of things with this setup that make it a bit tricky.
The square has rounded corners and a square inside.
The line in the middle has some trapezoid borders.
The arrow is rounded, so we can't use an HTML arrow for this.

No worries, we'll make this work.

CSS daily.dev logo

Let's start by setting up all the elements we need.

<div class="dd">
  <div class="square"></div>
  <div class="stripe"></div>
  <div class="arrow"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

As you can see, I tried to reflect the naming in terms of what I described in the analyze section.

Alright, we also want to add some default CSS variables that we can re-use.

:root {
  --bg: #151618;
  --radius: 20px;
  --gray: #989899;
}
Enter fullscreen mode Exit fullscreen mode

As for the body, we want to make this our background color and center everything inside.

body {
  background: var(--bg);
  display: grid;
  place-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}
Enter fullscreen mode Exit fullscreen mode

Then we want to address our wrapping div, and I want to make it one specific size. It won't be scaleable, but you could make it so by adjusting the size and border radius.

.dd {
  position: relative;
  width: 350px;
  aspect-ratio: 350/200;
  overflow: hidden;
}
Enter fullscreen mode Exit fullscreen mode

Then let's move on to creating the square element. This is the easier one, as we need to add a square with rounded corners and use the :before pseudo element to overlay another square inside.
We then rotate the whole square and position it accordingly.

Note: Throughout this article, I'll use SCSS since it's easier to make it visually explained.

.square {
  width: 42.857%;
  aspect-ratio: 1;
  background: white;
  border-radius: var(--radius);
  transform: rotate(45deg);
  top: 11.5%;
  position: absolute;
  left: 6.571%;
  z-index: 1;
  display: grid;
  place-items: center;
  &:before {
    content: '';
    width: 50%;
    aspect-ratio: 1;
    background: var(--bg);
    position: absolute;
  }
}
Enter fullscreen mode Exit fullscreen mode

With this in place, we should get the following square.

Square element of daily.dev logo

The next element we need is the stripe in the middle.
This can also be a rectangle shape that we rotate.

We also set the top left and bottom right border radius to reflect the logo.

.stripe {
  width: 11.429%;
  height: 130%;
  background: white;
  position: absolute;
  transform: rotate(45deg);
  border-radius: var(--radius) 0px var(--radius) 0px;
  left: 44.286%;
  top: -16%;
  z-index: 3;
}
Enter fullscreen mode Exit fullscreen mode

daily.dev logo square and stripe

The tricky part for this element is that we want the skewed triangles to cut out some pieces of the square and arrow later.
I decided again to use pseudo elements. I created another rectangle shape but used the skew transform to make it look like a trapezoid shape.

.stripe {
  &:before,
  &:after {
    content: '';
    position: absolute;
    width: 35%;
    height: 100%;
    background: var(--bg);
  }
  &:before {
    left: -35%;
    bottom: 7%;
    transform: skewY(71deg);
  }
  &:after {
    right: -35%;
    top: 7%;
    transform: skewY(71deg);
  }
}
Enter fullscreen mode Exit fullscreen mode

In the image below, I painted the shapes pink so you can see what's happening.

Trapezoid shapes on the daily.dev logo

Perfect, if we paint those black, we have the shape we want.
All that's left now is the arrow on the right.

As mentioned, this shape has rounded corners, making things a little more complicated.

(When working with straight corners, we could have the user a square box with only two borders visible)

However, no worries, our good friends, the pseudo elements come in handy again.
For the arrow, we use two rounded rectangles that overlap each other.

.arrow {
  position: absolute;
  width: 11.429%;
  height: 150%;
  left: 78.286%;
  top: 31.5%;
  z-index: 2;
  &:before,
  &:after {
    content: '';
    position: absolute;
    background: var(--gray);
    border-radius: var(--radius);
    display: block;
    left: -5%;
    height: 50%;
    width: 100%;
    transform: rotate(45deg);
  }
  &:after {
    bottom: 76%;
    transform: rotate(-45deg);
  }
}
Enter fullscreen mode Exit fullscreen mode

In the image below, I painted one red and one blue so you can see what's happening.

Rounded arrow in CSS

And that's it. Curious to see the result?
Check out this CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (10)

Collapse
 
link2twenty profile image
Andrew Bone

I'm looking forward to seeing if you or @alvaromontoro tackle the firefox logo first πŸ˜‰

Collapse
 
grahamthedev profile image
GrahamTheDev

Old or modern? As the old one would be mind-blowing!

Collapse
 
link2twenty profile image
Andrew Bone

why not both

Collapse
 
dailydevtips1 profile image
Chris Bongers

Oef that's a big challenge 🀯

Collapse
 
posandu profile image
Posandu • Edited

Noticed that the code blocks are messed up a bit.
Nice article btw.

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thanks for the heads-up totally missed it as it only happened on dev.to πŸ‘€
Glad you liked it πŸ’–

Collapse
 
codewithayan10 profile image
Code with Ayan

That was fantastic! Great job, Im new to this community and I see that there are quality coders

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thanks a lot Ayan,
There are some really skilled people on dev.to πŸ’–

Collapse
 
gabrielamozer profile image
Gabriela-Mozer

that's amazing!!

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thanks a lot Gabriela, glad you enjoyed the article πŸ’–