Create Chevron with border in AgularJS [duplicate] - css

Question

This question already has answers here:
CSS triangle custom border color
(5 answers)
Closed 5 years ago.
I am using below example to create a chevron but I am not able to create a black border around each chevron.
http://jsfiddle.net/Ez6Q3/25/
HTML:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>
<div class="well">
Click the chevrons to see the different colors.
</div>
<div ng-controller="MyCtrl">
<progressbar steps="steps.all"></progressbar>
</div>
CSS:
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;
}
Angular Script:
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: "<div class='chevrons'>\n<ul class='chevrons'>\n<li ng-class='step.status' ng-repeat='step in _steps'><span><a ng-click=\"operationClicked(step)\" href=\"#\" ng-bind=\"step.title\"/></span></li>\n </ul></div>",
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 < _len; _i++) {
step = _ref[_i];
if (step.operation === operation) {
_results.push(step.status = status);
} else {
_results.push(void 0);
}
}
return _results;
};
return ProgressSteps;
})();
});
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.
Thanks
Mitul J

Answer 1

You need to color the triangles attached to the li to your desired border color and add two new triangles to the inner element (span) to create the "illusion" of a triangle with border. This questions has already been answered in detail two times on stackoverflow :)
Links that will help you:
Adding border to CSS triangle
CSS triangle custom border color
Another interesting method this text-stroke:
Create a triangle with CSS?