Skip to content

Instantly share code, notes, and snippets.

@Rplus

Rplus/Taiwan-flag-in-CSS.md

Last active March 5, 2016 01:31
Show Gist options
  • Save Rplus/3d69f029d4dfeb376843 to your computer and use it in GitHub Desktop.
Save Rplus/3d69f029d4dfeb376843 to your computer and use it in GitHub Desktop.
Download ZIP
codepen: Taiwan flag in CSS
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
.box
.flag
blockquote.info
| original design: #[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;
$flag-gap: 2.5%;
.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: $flag-gap;
background-color: $c-blue;
background-clip: content-box;
background-position: 50%;
background-repeat: no-repeat;
background-image:
linear-gradient(135deg, $c-white 25%, transparent 25%, transparent 75%, $c-white 75%),
linear-gradient(135deg, transparent (50% - $flag-gap), $c-white (50% - $flag-gap), $c-white (50% + $flag-gap), transparent (50% + $flag-gap));
background-size:
50% 50%,
100% 100%;
}
}
.box {
flex: 1;
width: 100%;
max-width: 40rem;
margin: 0 auto;
}
/// reset
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100%;
margin: 0;
background: linear-gradient(#ccf, #fff 90%) no-repeat fixed;
color: #222;
text-align: center;
}
.intro {
width: 90%;
max-width: 30rem;
padding-bottom: 1rem;
margin: 0 auto 1em;
padding-top: .5em;
font-size: calc(1rem + 2vmin);
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 {
margin: 0;
padding: 1em;
font-size: .9em;
font-style: italic;
font-family: serif;
text-align: right;
opacity: .5;
a {
color: inherit;
}
}
Raw
taiwan-flag-design_陳致豪.jpg
taiwan-flag-design_陳致豪.jpg
@Rplus
Copy link
Author

Rplus commented Mar 5, 2016

codepen: http://codepen.io/Rplus/pen/ONyzJP

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment