Need tips to make this CSS looks more like this image.

[MarkTopper]

Greetings.

Can anyone help me make this:
http://codepen.io/anon/pen/oIpbK

looks more like this image:
https://rpm.newrelic.com/images/v3/template/logo-newrelic.png

Any ideas for making it more like that?

[TheDoc]

Before anyone dives headfirst into this, is there a reason why you’re trying to use CSS here? Surely an SVG image or perhaps a font would suit your scalability needs?

[MarkTopper]

Just doing it to learn. It is too easy to make it as a image, but I would like to see some new CSS codes, and then learn what it can do.

[TheDoc]

This is pretty close. http://jsfiddle.net/VxPcY/

Just needs lots of super minor tweaking.

[joshuanhibbert]

@TheDoc Nicely done! I’m not a massive fan of extra markup, so I have taken your work but replaced the spans with pseudo-elements. Also, I used border-radius over transform, so that the you don’t need all the browser prefixes: http://jsfiddle.net/joshnh/zhbbb/

[TheDoc]

I like!

[MarkTopper]

Thanks a lot to both of you.
Create idea with the transform rotate, as then it gets to the right spot.

And thanks alot joshuanhibbert, for the pseudo-elements, I will try learn more about this.
It is pretty fantastic that you can make 3 cirles with only one div box.

But I though that border-radius should also have the brower spefixes, am I wrong?

[joshuanhibbert]

As you can see here, it doesn’t really need them anymore.

[Author]

Posts