A British blue Ensign http://en.wikipedia.org/wiki/Blue_Ensign
A Pen by Adam Henley on CodePen.
#flag | |
#union_cross | |
#standrew | |
#stpatrick1 | |
#stpatrick2 | |
#stgeorge_fimbriation | |
#stgeorge | |
A British blue Ensign http://en.wikipedia.org/wiki/Blue_Ensign
A Pen by Adam Henley on CodePen.
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; | |
} | |
} |