A Pen by Adam Henley.

index.haml

#flag
    #union_cross
        #standrew
        #stpatrick1
        #stpatrick2
        #stgeorge_fimbriation
        #stgeorge
    
      

Pure-CSS-British-Blue-Ensign.markdown

Pure CSS British Blue Ensign

A British blue Ensign http://en.wikipedia.org/wiki/Blue_Ensign

A Pen by Adam Henley on CodePen.

License.

style.less

body { background-color: rgb(255,255,255); }
:before, :after {content:' '; display:inline-block; position:absolute;}

@flag_blue: rgb(0, 43, 127);
@flag_red: rgb(232,17,45);
@flag_white: rgb(255,255,255);

@flag_ratio:2;
@flag_width:500px;
@flag_height: (@flag_width/@flag_ratio);

@union_flag_width: (@flag_width/2);   //put the #union_cross in the top left quadrant
@union_flag_height: (@flag_height/2);

#flag { 
  position:absolute; top:0; bottom:0; left:0;right:0; margin:auto;
  width: @flag_width;
  height: @flag_height;
  background-color: @flag_blue;
}

#union_cross{
  @standrew_width:(6*(@union_flag_width/58)); // wikipedia
  @standrew_height: @union_flag_width+@union_flag_height;
  @standrew_angle: 63.4349488229deg; //arctan(@flag_ratio)
  
  position:relative;
  top:0;left:0;
  width:@union_flag_width;
  height:@union_flag_height;
  overflow:hidden;
  
  #standrew:before, #standrew:after{
    width: @standrew_width;
    height:@standrew_height;
    background-color:@flag_white;
  }
  #standrew:before{
    top:-30px; left:-(@standrew_width/2); 
    .transform-origin(50% 30px);
    .rotate(-@standrew_angle);
  }
  #standrew:after{
    top:-30px;right:-(@standrew_width/2);
    .transform-origin(50% 30px);
    .rotate(@standrew_angle);
  }
  @stpatrick_red_width: (2 * (@union_flag_width / 58)) ;
  .stpatrick_common{     
     background-color:@flag_red;
     width: @stpatrick_red_width;
     height: @union_flag_width/2; 
  }
  #stpatrick1:before{
    .stpatrick_common;
    left:-@stpatrick_red_width;
    top:-10px;
    .transform-origin(100% 10px);
    .rotate(-@standrew_angle);
  }
  #stpatrick1:after{    
    .stpatrick_common;
    bottom:-10px;
    right:-@stpatrick_red_width;
    .transform-origin(0% ((@union_flag_width/2)-10px));
    .rotate(-@standrew_angle);
  }
  #stpatrick2:before{
   .stpatrick_common;
    bottom:-20px;
    left:@stpatrick_red_width;
    .transform-origin(100% ((@union_flag_width/2)-20px));
    .rotate(@standrew_angle);
  }
  #stpatrick2:after{
   .stpatrick_common;
   top:-10px;
   right:0;
    .transform-origin(100% 10px);
    .rotate(@standrew_angle);
  }
  
  
  .stgeorge_fimbriation_common{    
    background-color:@flag_white;   
    @width_val: (10 * (@union_flag_width / 58));
    top:0; bottom:0;left:0;right:0;
  }
  #stgeorge_fimbriation:before{ 
    .stgeorge_fimbriation_common;
    width: @union_flag_width;
    height: @width_val ;
    margin:auto 0;
  }
  #stgeorge_fimbriation:after{   
    .stgeorge_fimbriation_common;
    height:@union_flag_height;
    width: @width_val;
    margin:0 auto;
  }
  
  .stgeorge_common { 
    margin:0 auto;    
    @width_val: (6 * (@union_flag_width / 58));
    background-color:@flag_red;
     top:0; bottom:0;left:0;right:0;
  }  
  #stgeorge:before{
     .stgeorge_common;
     width:@union_flag_width; 
     height: @width_val ;
     margin:auto 0;
  } 
  #stgeorge:after{     
    .stgeorge_common;
    height:@union_flag_height;
    width: @width_val;
    margin:0 auto;
  }  
}