Skip to content

Instantly share code, notes, and snippets.

@biojazzard

biojazzard/dabblet.css

Created January 21, 2012 20:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save biojazzard/1653899 to your computer and use it in GitHub Desktop.
Save biojazzard/1653899 to your computer and use it in GitHub Desktop.
Download ZIP
estelada
Raw
dabblet.css
/* estelada */
.flag {
width: 460px;
min-width: 460px;
height: 300px;
min-height: 300px;
overflow: hidden;
margin: 0px auto;
-ms-box-shadow: rgba(0, 0, 0, 0.5) -1px -1px 2px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) -1px 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) -1px 1px 2px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 1px 1px;
}
.estelada {
position: relative;
width: 100%;
height: 300px;
background-color: #ffd700;
overflow: hidden;
}
.bar {
position: relative;
width: 100%;
height: 33.333333333333336px;
margin-top: 33.333333333333336px;
background-color: #cc0000;
}
.right-triangle-y {
display: none;
width: 0;
height: 0;
border-left: 150px solid #ffd700;
border-top: 150px solid transparent;
border-bottom: 150px solid transparent;
}
.right-triangle-y {
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 0px;
height: 0px;
border-left: 150px solid #ffd700;
border-top: 150px solid transparent;
border-bottom: 150px solid transparent;
}
.right-triangle-b {
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 0px;
height: 0px;
border-left: 150px solid #0f47af;
border-top: 150px solid transparent;
border-bottom: 150px solid transparent;
}
.star {
display: block;
position: absolute;
top: -150px;
left: -130px;
width: 92px;
height: 300px;
vertical-align: middle;
line-height: 300px;
font-size: 92px;
text-align: center;
margin-top: 0px;
}
.star.red {
color: #cc0000;
}
.star.white {
color: #ffffff;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="container flag">
<div class="estelada">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="right-triangle-b">
<div class="star white">&#9733;</div>
</div>
<div class="right-triangle-y">
<div class="star red">&#9733;</div>
</div>
</div>
</div>
Raw
settings.json
{"view":"split-vertical","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment