Skip to content

Instantly share code, notes, and snippets.

@pcalves

pcalves/dabblet.css

Last active August 29, 2015 13:57
Show Gist options
  • Save pcalves/9813007 to your computer and use it in GitHub Desktop.
Save pcalves/9813007 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Triangle border
Raw
dabblet.css
/**
* CSS Triangle border
*/
body {
background-color: #e6e6da;
color: black;
font-family: sans-serif;
font-size: 14px;
}
.stack__item {
color: white;
box-sizing: border-box;
display: inline-block;
width:100px;
height:50px;
padding: 15px 0 15px 20px;
position: relative;
background-color: #990000;
margin-right:30px;
}
.stack__item:before {
content: "";
position: absolute;
top:0;
right:-30px;
border-top: 25px solid #990000;
border-bottom: 25px solid #990000;
border-left: 25px solid transparent;
}
.stack__item:after {
content:"";
position: absolute;
right: -25px;
top: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #990000;
}
.stack > .stack__item:last-of-type:before {
border:0;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<h1>One Element</h1>
<div class="stack">
<div class="stack__item">Element #1</div>
</div>
<h1>Stacked Elements</h1>
<div class="stack">
<div class="stack__item">Element #1</div><!--
--><div class="stack__item">Element #2</div><!--
--><div class="stack__item">Element #3</div><!--
--><div class="stack__item">Element #4</div>
</div>
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment