Skip to content

Instantly share code, notes, and snippets.

@Farmatique
Last active March 14, 2017 22:30
Show Gist options
  • Save Farmatique/9b952960bbeab5c48df38c2fa3d5c494 to your computer and use it in GitHub Desktop.
Save Farmatique/9b952960bbeab5c48df38c2fa3d5c494 to your computer and use it in GitHub Desktop.
Blocks with arrows
<div class="wrapper">
<div class="outer-bottom-arrow"></div>
<div class="inner-top-arrow">
<div class="left-block"></div>
<div class="right-block"></div>
</div>
</div>
.wrapper{
position: relative;
width:500px;
height: 200px;
background-color: green;
}
.outer-bottom-arrow{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30px;
background-color: #0a1631;
}
.outer-bottom-arrow:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
top: 100%;
left: 48%;
border-left: 26px solid transparent;
border-right: 26px solid transparent;
border-top: 14px solid #0a1631;
}
.inner-top-arrow{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 14px;
background-color: transparent;
border-bottom: 11px solid red;
box-sizing: content-box;
}
.inner-top-arrow .left-block{
width: 40%;
float: left;
border-left: 0 solid transparent;
border-right: 26px solid transparent;
border-bottom: 14px solid red;
}
.inner-top-arrow .right-block{
width: 40%;
float: left;
border-left: 26px solid transparent;
border-right: 0 solid transparent;
border-bottom: 14px solid red;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment