{"id":1030,"date":"2011-11-16T21:22:31","date_gmt":"2011-11-16T21:22:31","guid":{"rendered":"https:\/\/simonertel.net\/blog\/?p=1030"},"modified":"2026-04-26T06:29:03","modified_gmt":"2026-04-26T06:29:03","slug":"logo-in-css","status":"publish","type":"post","link":"https:\/\/simonertel.net\/blog\/en\/logo-in-css\/","title":{"rendered":"Logo in CSS"},"content":{"rendered":"

I am currently working for Twenga<\/a>, a price comparison site.<\/p>\n

Like most companies, it has a strong visual identity, marked by a logo identifiable by a target, marked with an arrow.
\nFor fun and because it was trendy, I got drawn into recreating the logo in pure CSS, with no image or JavaScript!<\/p>\n

An exercise as tedious as it is fun and pointless, I tackled it, curious to see whether I would run into any unexpected difficulty or discovery!<\/p>\n

 <\/p>\n

The main blue outer circle.<\/span>On top of the blue circle, the first inner circle, white.<\/span>The small blue circle at the center of the target.<\/span>The nearly transparent white circle that creates the reflective effect for the whole target.<\/span>The tip of the white arrow that stands out.<\/span>White mask.<\/span>The tip of the brown arrow.<\/span>Left white part of the arrow, which goes over the outer circle.<\/span>Left brown part of the arrow, which goes over the circle.<\/span>Brown right \/ upper part of the arrow.<\/span>Mask for the bottom of the previous part, with the same background as the blue circle.<\/span>Mask of the mask (!) which makes it possible to soften the blue of the mask below in the same way as span.circle4 does.<\/span><\/div>\n

<\/p>\n

The HTML structure<\/h3>\n
\n<div id=\"logo\"><\/span>\n\n\t<span class=\"circle1\"><\/span>The main blue outer circle.<\/span><\/span>\n\t<span class=\"circle2\"><\/span>On top of the blue circle, the first inner circle, white.<\/span><\/span>\n\t<span class=\"circle3\"><\/span>The small blue circle at the center of the target.<\/span><\/span>\n\t<span class=\"circle4\"><\/span>The nearly transparent white circle that creates the reflective effect for the whole target.<\/span><\/span>\n\t<span class=\"arrow1\"><\/span>The tip of the white arrow that stands out.<\/span><\/span>\n\t<span class=\"arrow2\"><\/span>White mask.<\/span><\/span>\n\t<span class=\"arrow3\"><\/span>The tip of the brown arrow.<\/span><\/span>\n\t<span class=\"arrow4\"><\/span>Left white part of the arrow, which goes over the outer circle.<\/span><\/span>\n\t<span class=\"arrow5\"><\/span>Left brown part of the arrow, which goes over the circle.<\/span><\/span>\n\t<span class=\"arrow6\"><\/span>Brown right \/ upper part of the arrow.<\/span><\/span>\n\t<span class=\"arrow7\"><\/span>Mask for the bottom of the previous part, with the same background as the blue circle.<\/span><\/span>\n\t<span class=\"arrow8\"><\/span>Mask of the mask (!) which makes it possible to soften the blue of the mask below in the same way as span.circle4 does.<\/span><\/span>\n\n<\/div><\/span><\/pre>\n
 <\/p>\n
Nothing too difficult then, as you can see!<\/p>\n
The CSS<\/h3>\n
#logo{<\/span>position:<\/span>relative;<\/span>margin:<\/span>74px 0 0 80px;<\/span>text-indent:<\/span>-9999px;<\/span>}<\/span>\n#logo span{<\/span>position:<\/span>absolute;<\/span>display:<\/span>block;<\/span>}<\/span>\n\n.circle1{<\/span>\n\tclip:<\/span>rect(-2px,257px,276px,-6px);<\/span>\n\ttop:<\/span>77px;<\/span>left:<\/span>21px;<\/span>\n\twidth:<\/span>241px;<\/span>height:<\/span>267px;<\/span>\n\tborder:<\/span>1px solid transparent;<\/span>\n\tborder-top-left-radius:<\/span>145px 160px;<\/span>\n\tborder-top-right-radius:<\/span>110px 123px;<\/span>\n\tborder-bottom-left-radius:<\/span>110px 120px;<\/span>\n\tborder-bottom-right-radius:<\/span>144px 157px;<\/span>\n\t-webkit-box-shadow:<\/span>0 0 0 100px #fff;<\/span>\n\tbackground:<\/span>#01b0e7;<\/span>\n\tbackground:<\/span>-moz-radial-gradient(center, ellipse cover,  #0072a1 1%, #01b0e7 60%) 51px 26px;<\/span>\n\tbackground:<\/span>-webkit-gradient(radial, 51px 26px, 0px, 51px 26px, 100%, color-stop(1%,#0072a1), color-stop(60%,#01b0e7));<\/span>\n\tbackground:<\/span>-webkit-radial-gradient(center, ellipse cover,  #0072a1 1%,#01b0e7 60%) 51px 26px;<\/span>\n\tbackground:<\/span>-o-radial-gradient(center, ellipse cover, #0072a1 1%, #01b0e7 60%) 51px 26px;<\/span>\n\tbackground:<\/span>-ms-radial-gradient(center, ellipse cover,  #0072a1 1%, #01b0e7 60%) 51px 26px;<\/span>\n\tbackground:<\/span>radial-gradient(center, ellipse cover,  #0072a1 1%, #01b0e7 60%) 51px 26px;<\/span>\n}<\/span>\n\n.circle2{<\/span>left:<\/span>54px;<\/span>top:<\/span>131px;<\/span>width:<\/span>145px;<\/span>height:<\/span>145px;<\/span>background:<\/span>#fff;<\/span>border-radius:<\/span>73px;<\/span>\n\t-moz-transform:<\/span>rotate(64deg) skew(-4deg, 15deg);<\/span>\n\t-webkit-transform:<\/span>rotate(64deg) skew(-4deg, 15px);<\/span>\n\t-o-transform:<\/span>rotate(64deg) skew(-4deg, 15px);<\/span>\n\t-ms-transform:<\/span> rotate(64deg) skew(-4deg, 15px);<\/span>\n}<\/span>\n\n\/* Central element *\/\n.circle3{<\/span>\n\ttop:<\/span>163px;<\/span>left:<\/span>84px;<\/span>\n\twidth:<\/span>80px;<\/span>height:<\/span>75px;<\/span>\n\tborder-radius:<\/span>50px;<\/span>\n\tbackground:<\/span>#009dd2;<\/span>\n\tbackground:<\/span>-moz-linear-gradient(-45deg, #00a0d7 0%, #19b3e6 100%);<\/span>\n\tbackground:<\/span>-webkit-gradient(linear, left top, right bottom, color-stop(0%,#00a0d7), color-stop(100%,#19b3e6));<\/span>\n\tbackground:<\/span>-webkit-linear-gradient(-45deg, #00a0d7 0%,#19b3e6 100%);<\/span>\n\tbackground:<\/span>-o-linear-gradient(-45deg, #00a0d7 0%,#19b3e6 100%);<\/span>\n\tbackground:<\/span>-ms-linear-gradient(-45deg, #00a0d7 0%,#19b3e6 100%);<\/span>\n\tbackground:<\/span>linear-gradient(-45deg, #00a0d7 0%,#19b3e6 100%);<\/span>\n\t-moz-transform:<\/span>rotate(72deg) skew(-4deg, 15deg);<\/span>\n\t-webkit-transform:<\/span>rotate(72deg) skew(-4deg, 15px);<\/span>\n\t-o-transform:<\/span>rotate(72deg) skew(-4deg, 15px);<\/span>\n\t-ms-transform:<\/span>rotate(72deg) skew(-4deg, 15px);<\/span>\n}<\/span>\n\n.circle4{<\/span>\n\ttop:<\/span>-59px;<\/span>left:<\/span>6px;<\/span>\n\twidth:<\/span>260px;<\/span>height:<\/span>260px;<\/span>\n\tborder-radius:<\/span>130px;<\/span>\n\tbackground:<\/span>#fff;<\/span>\n\topacity:<\/span>0.2;<\/span>\n\tclip:<\/span>rect(133px,247px,272px,30px);<\/span>\n}<\/span>\n\n.arrow1{<\/span>\n\tborder-top:<\/span>50px solid transparent;<\/span>\n\tborder-right:<\/span>42px solid transparent;<\/span>\n\tborder-bottom:<\/span>41px solid transparent;<\/span>\n\tborder-left:<\/span>47px solid #fff;<\/span>\n\theight:<\/span>1px;<\/span>width:<\/span>1px;<\/span>top:<\/span>159px;<\/span>left:<\/span>94px;<\/span>\n\t-moz-transform:<\/span>rotate(21deg);<\/span>\n\t-webkit-transform:<\/span>rotate(21deg);<\/span>\n\t-o-transform:<\/span>rotate(21deg);<\/span>\n\t-ms-transform:<\/span>rotate(21deg);<\/span>\n}<\/span>\n\n.arrow2{<\/span>width:<\/span>30px;<\/span>height:<\/span>60px;<\/span>background:<\/span>#fff;<\/span>top:<\/span>162px;<\/span>left:<\/span>77px;<\/span>}<\/span>\n\n.arrow3{<\/span>\n\tborder-left:<\/span>34px solid #894436;<\/span>\n\tborder-right:<\/span>34px solid transparent;<\/span>\n\tborder-top:<\/span>30px solid transparent;<\/span>\n\tborder-bottom:<\/span>30px solid transparent;<\/span>\n\theight:<\/span>1px;<\/span>width:<\/span>1px;<\/span>top:<\/span>175px;<\/span>left:<\/span>93px;<\/span>\n\t-moz-transform:<\/span>rotate(21deg);<\/span>\n\t-webkit-transform:<\/span>rotate(21deg);<\/span>\n\t-o-transform:<\/span>rotate(21deg);<\/span>\n\t-ms-transform:<\/span>rotate(21deg);<\/span>\n}<\/span>\n\n.arrow4{<\/span>\n\twidth:<\/span>168px;<\/span>height:<\/span>121px;<\/span>\n\ttop:<\/span>10px;<\/span>left:<\/span>20px;<\/span>\n\tbackground:<\/span>transparent;<\/span>\n\tborder:<\/span>38px solid #fff;<\/span>\n\tborder-top-left-radius:<\/span>45px 158px;<\/span>\n\tborder-bottom-left-radius:<\/span>125px 121px;<\/span>\n\tborder-right:<\/span>none;<\/span>\n\tborder-left-width:<\/span>46px;<\/span>\n\tborder-top-width:<\/span>none;<\/span>\n\tborder-bottom-width:<\/span>none;<\/span>\n\tclip:<\/span>rect(0px,65px,272px,0);<\/span>\n}<\/span>\n\n.arrow5{<\/span>\n\twidth:<\/span>168px;<\/span>height:<\/span>146px;<\/span>\n\ttop:<\/span>0;<\/span>left:<\/span>28px;<\/span>\n\tbackground:<\/span>transparent;<\/span>\n\tborder:<\/span>20px solid #8b4438;<\/span>\n\tborder-top-left-radius:<\/span>141px 158px;<\/span>\n\tborder-top-right-radius:<\/span>103px 137px;<\/span>\n\tborder-bottom-right-radius:<\/span>102px 60px;<\/span>\n\tborder-bottom-left-radius:<\/span>125px 121px;<\/span>\n\tborder-right:<\/span>none;<\/span>\n\tborder-left-width:<\/span>28px;<\/span>\n\tborder-top-width:<\/span>46px;<\/span>\n\tborder-bottom-width:<\/span>10px;<\/span>\n\tclip:<\/span>rect(0px,90px,272px,0);<\/span>\n}<\/span>\n.arrow6{<\/span>\n\twidth:<\/span>118px;<\/span>height:<\/span>146px;<\/span>\n\ttop:<\/span>0;<\/span>left:<\/span>28px;<\/span>\n\tbackground:<\/span>transparent;<\/span>\n\tborder:<\/span>20px solid #8B4438;<\/span>\n\tborder-top-left-radius:<\/span>141px 158px;<\/span>\n\tborder-top-right-radius:<\/span>134px 137px;<\/span>\n\tborder-bottom-right-radius:<\/span>102px 60px;<\/span>\n\tborder-bottom-left-radius:<\/span>125px 121px;<\/span>\n\tborder-right-width:<\/span>50px;<\/span>\n\tborder-left-width:<\/span>28px;<\/span>\n\tborder-top-width:<\/span>46px;<\/span>\n\tborder-bottom-width:<\/span>10px;<\/span>\n\tclip:<\/span>rect(0px,200px,90px,64px);<\/span>\n}<\/span>\n\n.arrow7{<\/span>\n\tbackground:<\/span>#01b0e7;<\/span>\n\ttop:<\/span>77px;<\/span>left:<\/span>21px;<\/span>\n\twidth:<\/span>241px;<\/span>height:<\/span>267px;<\/span>\n\tborder:<\/span>1px solid transparent;<\/span>\n\tborder-top-left-radius:<\/span>145px 160px;<\/span>\n\tborder-top-right-radius:<\/span>110px 123px;<\/span>\n\tborder-bottom-left-radius:<\/span>110px 120px;<\/span>\n\tborder-bottom-right-radius:<\/span>144px 157px;<\/span>\n\tbox-shadow:<\/span>0 0 0 10px #fff;<\/span>\n\t-webkit-box-shadow:<\/span>0 0 0 10px #fff;<\/span>\n\t-ms-box-shadow:<\/span>0 0 0 10px #fff;<\/span>\n\tclip:<\/span>rect(-15px,208px,32px,143px);<\/span>\n}<\/span>\n\n.arrow8{<\/span>\n\tbackground:<\/span>#fff;<\/span>\n\ttop:<\/span>77px;<\/span>left:<\/span>21px;<\/span>\n\twidth:<\/span>241px;<\/span>height:<\/span>267px;<\/span>\n\tborder:<\/span>1px solid transparent;<\/span>\n\tborder-top-left-radius:<\/span>145px 160px;<\/span>\n\tborder-top-right-radius:<\/span>110px 123px;<\/span>\n\tborder-bottom-left-radius:<\/span>110px 120px;<\/span>\n\tborder-bottom-right-radius:<\/span>144px 157px;<\/span>\n\tbox-shadow:<\/span>0 0 0 10px #fff;<\/span>\n\t-webkit-box-shadow:<\/span>0 0 0 10px #fff;<\/span>\n\topacity:<\/span>0.2;<\/span>\n\tclip:<\/span>rect(-15px,208px,32px,143px);<\/span>\n}<\/span><\/pre>\n
 <\/p>\n
The first results are encouraging:<\/h3>\n