Sheldon Cooper Presents: Fun with Flags

dabblet.css

* The first commented line is your dabblet’s title
 */
body {
}
div{
float:left;
margin-right:70px
}
.flag1 {
background: linear-gradient(40deg, red 40%, white 40%, white 43%, black 43%, black 57%, white 57%, white 60%, red 60%);
height: 200px;
width: 400px;
}

.flag2 {
background-color: red;
background-image: linear-gradient(transparent 40%, white 40%, white 60%, transparent 60%), linear-gradient(90deg, transparent 20%, white 20%, white 30%, transparent 30%);
height: 200px;
width: 400px
}

.flag3{
background-image: linear-gradient(transparent 40%, white 40%, white 60%, transparent 60%),
linear-gradient(90deg, blue 42%, white 42%, white 57%, blue 57%),
linear-gradient(blue 50%, white 50%);
background-repeat: no-repeat, no-repeat, repeat-y;
background-size: 40% 55%, 40% 55%, 100% 22%;
height: 200px;
width: 400px;
}
.flag4{
background-color: navy;
background-image: linear-gradient(transparent 42%, red 42%, red 58%, transparent 58%),
linear-gradient(90deg, transparent 37%, white 37%, white 45%, red 45%, red 55%, white 55%, white 63%, transparent 63%),
linear-gradient(transparent 35%, white 35%, white 65%, transparent 65%),
linear-gradient(30deg, transparent 40%, white 40%, white 45%, red 45%, red 48%, white 49%, white 55%, transparent 51%),
linear-gradient(330deg, transparent 40%, white 40%, white 45%, red 45%, red 48%, white 49%, white 55%, transparent 51%),
linear-gradient(205deg, transparent 40%, white 40%, white 45%, red 45%, red 48%, white 49%, white 55%, transparent 51%),
linear-gradient(150deg, transparent 40%, white 40%, white 45%, red 45%, red 48%, white 49%, white 55%, transparent 51%);
background-repeat: no-repeat;
background-size: 100% 100%, 100% 100%, 100% 100%, 40% 40%, 40% 40%, 40% 40%, 40% 40%;
background-position: 0 0, 0 0, 0 0, left top, left bottom, right bottom, right top;
height: 200px;
width: 400px;
}

dabblet.html

<div class="flag1"></div>
<div class="flag2"></div>
<div class="flag3"></div>
<div class="flag4"></div>

dabblet.js

//

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}