Skip to content

Instantly share code, notes, and snippets.

@Rplus

Rplus/Taiwan-flag-in-CSS-2.md

Last active March 4, 2016 23:57
Show Gist options
  • Save Rplus/36ba7c8156edf3a8857f to your computer and use it in GitHub Desktop.
Save Rplus/36ba7c8156edf3a8857f to your computer and use it in GitHub Desktop.
Download ZIP
codepen: Taiwan flag in CSS - part2
Raw
index.jade
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
title Taiwan flag design in CSS
meta(name="viewport", content="width=device-width")
link(rel="stylesheet", href="style.css")
body
h1.intro Taiwan flag design in CSS
small re-design
.box
.flag
blockquote.info
| inspirated from: #[a(href="https://www.facebook.com/photo.php?fbid=1147137788629900") Taiwan flag design] by #[a(href="https://www.facebook.com/denis0426") 陳致豪]
Raw
style.scss
$c-blue: #0b3b63;
$c-gray: #48c1bc;
$c-white: #fff;
$cos45: 1 / 1.41421;
$delta: 100% * (1 / $cos45) / ((1 / $cos45)*2 + 1);
.flag {
position: relative;
padding-bottom: 100% * 2 / 3;
overflow: hidden;
background-color: $c-blue;
@mixin flag-item($size: 100%) {
content: '';
position: absolute;
top: 25%;
left: 50%;
width: $size;
height: $size * 1.5;
transform-origin: 0% 0%;
transform: rotate(.125turn);
}
&::before { // bg
@include flag-item(100% * $cos45);
background-color: $c-white;
background-position: 50%;
background-repeat: no-repeat;
background-image: linear-gradient($c-gray, $c-gray);
background-size: (100% / 3) (100% / 3);
}
&::after { // tai
@include flag-item(100% * $cos45 / 3);
padding: 2.5%;
background-color: $c-blue;
background-clip: content-box;
background-position: 50%;
background-repeat: no-repeat;
background-image:
linear-gradient(45deg, $c-white $delta, transparent $delta, transparent (100% - $delta), $c-white (100% - $delta));
background-size:
46% 46%;
}
}
.box {
max-width: 40rem;
margin: 0 auto;
}
/// reset
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
background-image: linear-gradient(#ccf, #fff 90%);
color: #222;
text-align: center;
}
.intro {
width: 80%;
max-width: 30rem;
padding-bottom: 1rem;
margin: 0 auto 1em;
padding-top: .5em;
text-transform: capitalize;
border-bottom: 1px dashed rgba(#000, .3);
color: $c-blue;
text-shadow: 2px 2px 1px rgba(#fff, 1);
small {
display: block;
opacity: .5;
font-style: italic;
text-transform: none;
}
}
.info {
position: absolute;
bottom: 0;
right: 0;
margin: 0;
padding: 1em;
font-size: .9em;
font-style: italic;
font-family: serif;
text-align: right;
opacity: .5;
a {
color: inherit;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment