<div class="container">
  <h1>Arrows</h1>
  
  <div class="flexwrap">
    
    <div class="arrowed">
      <div class="arrow-1"></div>
    </div>
    
    <div class="arrowed">
      <div class="arrow-2"></div>
    </div>
    
    <div class="arrowed">
      <div class="arrow-3"></div>
    </div>
    
    <div class="arrowed">
      <div class="arrow-4"></div>
    </div>
    
    <div class="arrowed">
      <div class="arrow-5"></div>
    </div>
    
    <div class="arrowed">
      <div class="arrow-6"></div>
    </div>
    
  <div>
    
</div>

/* ------------------- */
/* TEMPLATE        -- */
/* ----------------- */

@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300);

body { 
  height: 100%; width: 100%; 
  background-color: #333; 
  color: whitesmoke; 
  font-size: 16px; 
  font-family: 'Lato';
  overflow: hidden;
} 
h1 { font-size: 32px; }

.container { 
  max-width: 960px; 
  height: 100%;
  margin: 0 auto; 
  padding: 20px;
}

.flexwrap {
  display: flex;
  flex-wrap: wrap;
}

/* ------------------- */
/* PEN STYLES      -- */
/* ----------------- */

/* Arrow holder */
.arrowed {
  position: relative;
  height: 200px; width: 200px;
  margin: 0 20px 20px 0;
  border: 1px solid rgba(0,0,0,0.25);
}

/* Just centering the examples */
.arrowed div {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
}

/* -- ARROW 1      -- */

.arrow-1 {
  height: 15px; width: 15px;
  border: 1px solid tomato;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}

/* -- ARROW 2      -- */

.arrow-2 {
  height: 10px; width: 10px;
  border: 1px solid mediumorchid;
  border-width: 1px 1px 0 0;
  transform: rotate(45deg);
}

.arrow-2:after {
  content: '';
  display: block;
  height: 10px; width: 10px;
  border: 1px solid mediumorchid;
  border-width: 1px 1px 0 0;
  
  /* Parent's rotation also
     rotates transform axis */
  /* Add width of border to Y */
  transform: translate(5px, -6px);
  
  /* rotate handled by parent */
}

/* -- ARROW 3      -- */

.arrow-3 {
  height: 0px; width: 0px;
  border: 8px solid;
  border-color: 
    mediumseagreen
    mediumseagreen
    transparent
    transparent;
  transform: rotate(45deg);
}

/* -- ARROW 4      -- */

.arrow-4 {
  /* duplicate the triange */
  position: relative;
  height: 0px; width: 0px;
  border: 8px solid;
  border-color: 
    darkorange
    darkorange
    transparent
    transparent;
  transform: rotate(45deg); 
}

.arrow-4:before, .arrow-4:after {
  content: '';
  display: block;
  position: absolute;
  
  /* set up more triangles */
  height: 0; width: 0;
  
  /* half the parent border
     rounded up */
  border: 5px solid;  
}

.arrow-4:before {
  border-color:
    darkorange
    transparent
    transparent
    darkorange;
  display: block;
  top: -1px; right: 0px;
  transform-origin: top right;
  transform: rotate(45deg); 
}

.arrow-4:after {
  border-color:
    transparent
    darkorange
    darkorange
    transparent;
  top: 0px; right: -1px;
  transform-origin: top right;
  transform: rotate(-45deg);
}

/* -- ARROW 5      -- */

.arrow-5 {
  /* more triangle */
  position: relative;
  height: 0px; width: 0px;
  border: 12px solid;
  border-color: 
    darkcyan
    darkcyan
    transparent
    transparent;
  transform: rotate(45deg); 
}

.arrow-5:before {
  content: '';
  position: absolute;
  top: 0px; right: 0px;
  display: block;
  height: 12px; width: 16px;
  background-color: darkcyan;
  transform: 
    rotate(-45deg) 
    translate(2px, 1px);
}

/* -- ARROW 6      -- */

.arrow-6 {
  /* more triangle */
  height: 10px; width: 10px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-width: 3px 3px 0 0;
  transform: rotate(45deg);
}

.arrow-6:before, .arrow-6:after {
  content: '';
  position: absolute;
  display: block;
  height: 10px; width: 10px;
  border-width: 3px 3px 0 0;
}

.arrow-6:before {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-width: 3px 3px 0 0;
  /* top - distance minus border */
  top: 7px; left: -10px;
}

.arrow-6:after {
  border: 1px solid rgba(255, 255, 255, 1);
  border-width: 3px 3px 0 0;
  /* top - distance plus border */
  top: -13px; left: 10px;
}