CodePen

HTML

            
              <h1>CSS Arrows/Triangles Combinations</h1>
<ol>
  <li><div class="side1"></div></li>
  <li><div class="side2"></div></li>
  <li><div class="all4"></div></li>
  <li><div class="top-n-bottom"></div></li>
  <li><div class="left-n-right"></div></li>
   <li><div class="side1 vertical"></div></li>
  <li class="top-bottom-separated">
    <div class="north"></div>
    <div class="south"></div>
  </li>
   <li class="west-east-separated ">
    <div class="west"></div>
    <div class="east"></div>
  </li>
</ol>
<ol>
  <li><div class="top-right"></div></li>
  <li><div class="bottom-right"></div></li>
  <li><div class="bottom-left"></div></li>
  <li><div class="top-left"></div></li>
</ol>
<ol class="extra">
  <li><div class="north"></div></li>
  <li><div class="east"></div></li>
  <li><div class="south"></div></li>
  <li><div class="west"></div></li>
</ol>
<p>Created by <a href="http://ricardozea.me/">Ricardo Zea</a></p>
            
          
!
via HTML Inspector

CSS

            
              //Styling stuff, not needed for the demo
  //Sass/Compass stuff
  @import "compass/css3/images";
  $MyBlack: #272822;
  $r: #c03;
  $g: #429032;
  $b: #2963BD;
  $y: #c90;

* { @include box-sizing(border-box); }
html { height: 100%; }
body { @include background(radial-gradient(lighten($MyBlack,5%),$MyBlack 80%)); color:white; text-align: center; font-family: 'Trebuchet MS'; }
a, a:visited { color:$b;  }
a:hover { color:$y; text-decoration: none; }
ol { padding: 10px 10px 10px 35px; margin: 50px; list-style-type: lower-alpha; overflow: hidden; border: #333 1px solid; background: rgba($MyBlack,.5); border-radius:2px; box-shadow:0 0 5px rgba(black,.2);
  li { float: left; margin-right: 70px;
    &:last-of-type { margin: 0; }
  }
  &.extra { padding-top: 30px;}
}
//Clearfix - http://davidwalsh.name/css-clear-fix
.clearfix:before, .clearfix:after {	display: block;	content: ""; height: 0;	overflow: hidden; }
.clearfix:after { clear: both; }

//Demo stuff - Edit below this line
div { margin-bottom:20px;
  //Boxes or Triangle Combinations
  &.side1 {
    height:0;
    width:0;
    border-top:100px solid $r;
    border-right:100px solid $b;
    
    //Vertical
    &.vertical { transform:rotate(45deg); margin-top: 20px; }
  }
  
  &.side2 {
    height:0;
    width:0;
    border-bottom:100px solid $g;
    border-right:100px solid $y;
  }

  &.all4 {
    border-style: solid;
    border-width: 50px;
    border-bottom-color: $b;
    border-left-color: $g;
    border-top-color: $y;
    border-right-color: $r;
    height: 0;
    width: 0;
  }
  
  &.top-n-bottom {
    border-style: solid;
    border-width: 50px;
    border-bottom-color: $b;
    border-left-color: transparent;
    border-top-color: $y;
    border-right-color: transparent;
    height: 0;
    width: 0;
  }
  
  &.left-n-right {
    border-style: solid;
    border-width: 50px;
    border-bottom-color: transparent;
    border-left-color: $g;
    border-top-color: transparent;
    border-right-color: $r;
    height: 0;
    width: 0;
  }

  //Arrows - Diagonal
  &.top-right {
    height:0;
    width:0;
    border-top:100px solid $g;
    border-left:100px solid transparent;
  }
  
  &.bottom-right {
    height:0;
    width:0;
    border-bottom:100px solid $r;
    border-left:100px solid transparent;
  } 

  &.bottom-left {
    height:0;
    width:0;
    border-bottom:100px solid $b;
    border-right:100px solid transparent;
  }
  
  &.top-left {
    height:0;
    width:0;
    border-top:100px solid $y;
    border-right:100px solid transparent;
  }
  
  //Arrows - Straight
   &.north {
    height:0;
    width:0;
    border-top:100px solid $g;
    border-left:100px solid transparent;
    transform:rotate(-45deg);
  }
  
   &.east {
    height:0;
    width:0;
    border-bottom:100px solid $r;
    border-left:100px solid transparent;
    transform:rotate(-45deg);
  
    //Only needed for demo
    margin-left:-50px;
  }
  
  &.south {
    height:0;
    width:0;
    border-bottom:100px solid $b;
    border-right:100px solid transparent;
    transform:rotate(-45deg);
    
  //Only needed for demo  
    margin-top:-20px;
  }
  
  &.west {
    height:0;
    width:0;
    border-top:100px solid $y;
    border-right:100px solid transparent;
    transform:rotate(-45deg);
  }
}

//Top and Bottom separated  
.top-bottom-separated { position: relative; margin-right: 170px /* This margin-right is not really needed it's only for the demo. */;
  div { position: absolute; margin: 0; }
  .south { border-bottom:100px solid $y; top: 20px; }

  //Only needed for demo
  .north { margin-top:10px; }
}

//West and East separated
.west-east-separated { position: relative;
  div { position: absolute; margin: 0; }
 .east { border-bottom:100px solid $r; top: 10px; left: 10px; }

  //Only needed for demo
  .west { margin-top:10px; }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................