title: Create Chevron with border in AgularJS
body: <p>I am using below example to create a chevron but I am not able to create a black border around each chevron.</p>
  
  <p><a href="http://jsfiddle.net/Ez6Q3/25/" rel="nofollow noreferrer">http://jsfiddle.net/Ez6Q3/25/</a>   </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"&gt;&lt;/script&gt;
  &lt;div class="well"&gt;
  Click the chevrons to see the different colors.
  &lt;/div&gt;
  
  &lt;div ng-controller="MyCtrl"&gt;
      &lt;progressbar steps="steps.all"&gt;&lt;/progressbar&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    body {
      font-family: Arial, Helvetica, sans-serif;
      font-weight: normal;
      -webkit-font-smoothing: antialiased;
  }
  h1 {
      font-size: 12pt;
  }
  div.chevrons {
      text-align: center;
  }
  ul.chevrons {
      font-size: xx-large;
      margin-bottom: 1em;
      padding: 0;
      margin: 0;
      list-style: none;
      overflow: hidden;
      display: inline;
  }
  ul.chevrons li:last-child {
      border-color: red;
  }
  ul.chevrons li {
      height: 40px;
      width: 160px;
      font-size: 15px;
      display: inline-block;
      font-weight: bold;
      margin-left: -10px;
  }
  ul.chevrons li:first-child {
      margin-left: 0px;
  }
  /* adjust the first item to not have a chevron on the left
  .chevrons li:first-child:before {
      border:none
  }*/
  /*
  adjust the last arrow to have no arrow on the right hand side
  .chevrons li:last-child:after {
      border:none
  }
  */
  
  ul.chevrons li:before {
      content: "";
      border-top: 20px solid #309dd4;
      border-bottom: 20px solid #309dd4;
      border-left: 10px solid transparent;
      height: 0;
      position: absolute;
  }
  ul.chevrons li:after {
      content: '';
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-right: 10px solid transparent;
      border-left: 10px solid #309dd4;
      height: 0;
      position: absolute;
  }
  ul.chevrons li span {
      padding-top: 10px;
      background: #309dd4;
      text-align: center;
      margin-left: 10px;
      height: 40px;
      width: 130px;
      padding-left: 10px;
      padding-right: 10px;
      display: inline-block;
  }
  ul.chevrons li.success a {
      color: #ffffff;
  }
  ul.chevrons li.success span {
      background: #67b646;
  }
  ul.chevrons li.success:after {
      border-left: 10px solid #67b646;
  }
  ul.chevrons li.success:before {
      border-top: 20px solid #67b646;
      border-bottom: 20px solid #67b646;
  }
  ul.chevrons li.failure a {
      color: #ffffff;
  }
  ul.chevrons li.failure span {
      background: #b84c4c;
  }
  ul.chevrons li.failure:after {
      border-left: 10px solid #b84c4c;
  }
  ul.chevrons li.failure:before {
      border-top: 20px solid #b84c4c;
      border-bottom: 20px solid #b84c4c;
  }
  ul.chevrons li.inprogress a {
      color: #ffffff;
  }
  ul.chevrons li.inprogress span {
      background: #e8ca2b;
  }
  ul.chevrons li.inprogress:after {
      border-left: 10px solid #e8ca2b;
  }
  ul.chevrons li.inprogress:before {
      border-top: 20px solid #e8ca2b;
      border-bottom: 20px solid #e8ca2b;
  }
  ul.chevrons a {
      color: #ffffff;
  }
  </code></pre>
  
  <p>Angular Script:</p>
  
  <pre><code> angular.module('myApp', ['frolicProgress']).controller('MyCtrl', function ($scope, ProgressSteps) {
      $scope.steps = new ProgressSteps($scope)
      $scope.$on('progress:step:clicked', function (event, step) {
          if (step.operation == 'query') step.status = 'inprogress';
          if (step.operation == 'transform') step.status = 'failure';
          if (step.operation == 'visualize') step.status = 'success';
      });
  });
  
  angular.module('frolicProgress', []).directive('progressbar', function () {
      var dir;
      dir = {
          restrict: "E",
          template: "&lt;div class='chevrons'&gt;\n&lt;ul class='chevrons'&gt;\n&lt;li ng-class='step.status' ng-repeat='step in _steps'&gt;&lt;span&gt;&lt;a ng-click=\"operationClicked(step)\" href=\"#\" ng-bind=\"step.title\"/&gt;&lt;/span&gt;&lt;/li&gt;\n                   &lt;/ul&gt;&lt;/div&gt;",
          replace: true,
          scope: {
              _steps: "=steps",
              _state: "=state"
          },
          link: function (scope, element) {
              var bar;
              bar = angular.element(element.children());
              scope.operationClicked = function (step) {
                  return scope.$emit('progress:step:clicked', step);
              };
          }
      };
      return dir;
  }).factory('ProgressSteps', function () {
      var ProgressSteps;
      return ProgressSteps = (function () {
          function ProgressSteps($scope) {
              this.add('query', 'Query');
              this.add('transform', 'Transform');
              this.add('visualize', 'Visualize');
              $scope.$on('easel:progress:query:started');
          }
  
  
  
          ProgressSteps.prototype.all = [];
  
          ProgressSteps.prototype.add = function (operation, title) {
              return this.all.push({
                  operation: operation,
                  title: title,
                  status: null
              });
          };
  
          ProgressSteps.prototype.inprogress = function (operation) {
              return this.updateStatus(operation, 'inprogress');
          };
  
          ProgressSteps.prototype.failure = function (operation) {
              return this.updateStatus(operation, 'failure');
          };
  
          ProgressSteps.prototype.success = function (operation) {
              return this.updateStatus(operation, 'success');
          };
  
          ProgressSteps.prototype.reset = function (operation) {
              return this.updateStatus(operation, null);
          };
  
          ProgressSteps.prototype.updateStatus = function (operation, status) {
              var step, _i, _len, _ref, _results;
              _ref = this.all;
              _results = [];
              for (_i = 0, _len = _ref.length; _i &lt; _len; _i++) {
                  step = _ref[_i];
                  if (step.operation === operation) {
                      _results.push(step.status = status);
                  } else {
                      _results.push(void 0);
                  }
              }
              return _results;
          };
  
          return ProgressSteps;
  
      })();
  });
  </code></pre>
  
  <p>I tried modifying :before and :after but nothing actually worked as chevron left and right are created using border property already. I am have a little experience working on CSS and using this chevron in one of the requirement which also asks me to create a border around it.</p>
  
  <p>Thanks
  Mitul J</p>