< Back to Frontend Friday Folks Index

Letter I

Visit the official puzzle page (affiliate link!) to play it yourself. If you buy a course from CSSBattle through my affiliate link, I receive a share of it!

Highlighted solution (613 characters)
1 
<div></div>
2 
<div b></div>
3 
<style>
4 
  *{margin:0}
5 
  div,div:after {
6 
    position:absolute;
7 
    width: 200;
8 
    height: 300;
9 
    background:
10 
      radial-gradient(1q at 125px 215px, #FADE8B 15px, #0000),
11 
      radial-gradient(1q at 165px 215px, #FADE8B 15px, #0000),
12 
      radial-gradient(1q at 165px 85px, #FADE8B 15px, #0000),
13 
      linear-gradient(to right,#E3516E 165px, #FADE8B 0)0 50%/100% 160px no-repeat,
14 
      #E3516E
15 
    ;
16 
  }
17 
  div:after{
18 
    content:"";
19 
    height: 100;
20 
    top:100;
21 
    right:15;
22 
    border-radius: 10px;
23 
    background: #E3516E;
24 
  }
25 
  [b] {rotate:180deg;transform-origin:100%}
26 
</style>

The image can be mirrored and rotated, so we had different solutions today. While Meg was using the X-axis for the mirror rotate, I've used the Y-axis. There are three radial gradients - two are the extensions of the capital I "serifs" and one is the actual visible circle. A linear gradient creates the serifs up to those radials and a div:after is to create the inside edges.

< Back to Frontend Friday Folks Index