Css 在AgularJS中创建带边框的V形

我正在使用下面的示例创建一个V形，但我无法在每个V形周围创建一个黑色边框

HTML:

角度脚本：

 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;

    })();
});

angular.module（'myApp'，['frolicProgress']）.controller（'MyCtrl'，function（$scope，ProgressSteps）{
$scope.steps=newprogresssteps（$scope）
$scope.$on（'进度：步骤：单击'，函数（事件，步骤）{
如果（step.operation=='query'）step.status='inprogress'；
如果（step.operation='transform'）step.status='failure'；
如果（step.operation=='visualized'）step.status='success'；
});
});
angular.module（'frolicProgress'，[]）。指令（'progressbar'，函数（）{
var-dir；
目录={
限制：“E”，
模板：“\n
\n
\n
”，
替换：正确，
范围：{
_步骤：“=步骤”，
_状态：“=状态”
},
链接：功能（范围、元素）{
var-bar；
bar=angular.element（element.children（））；
scope.operationClicked=函数（步骤）{
返回范围.$emit（'进度：步骤：单击'，步骤）；
};
}
};
返回目录；
}).factory（'ProgressSteps'，函数（）{
var进程步骤；
返回ProgressSteps=（函数（）{
功能步骤（$scope）{
添加（'query'，'query'）；
添加（'transform'，'transform'）；
添加（‘可视化’、‘可视化’）；
$scope.$on（'easel:progress:query:started'）；
}
ProgressSteps.prototype.all=[]；
ProgressSteps.prototype.add=函数（操作，标题）{
把这个还给我({
操作：操作，
标题:标题,，
状态：空
});
};
ProgressSteps.prototype.inprogress=功能（操作）{
返回这个.updateStatus（操作'inprogress'）；
};
ProgressSteps.prototype.failure=功能（操作）{
返回此.updateStatus（操作“失败”）；
};
ProgressSteps.prototype.success=函数（操作）{
返回此.updateStatus（操作“success”）；
};
ProgressSteps.prototype.reset=功能（操作）{
返回此.updateStatus（操作，null）；
};
ProgressSteps.prototype.updateStatus=函数（操作、状态）{
var阶跃，_i，_len，_ref，_结果；
_ref=this.all；
_结果=[]；
对于（_i=0，_len=_ref.length；_i<_len；_i++）{
步骤=_ref[_i]；
如果（步骤操作===操作）{
_结果.推送（步骤.状态=状态）；
}否则{
_结果：推挤（无效0）；
}
}
返回结果；
};
返回步骤；
})();
});

我尝试过修改：before和：after，但实际上并没有任何效果，因为已经使用border属性创建了雪佛龙左侧和右侧。我有一点CSS的工作经验，在一个需求中使用这个V形，这也要求我在它周围创建一个边框

谢谢

---

Mitul J

您需要将连接到

li

的三角形着色为所需的边框颜色，并将两个新三角形添加到内部元素（

span

）中，以创建带有边框的三角形的“幻觉”。这个问题已经在stackoverflow上详细回答了两次：）

有助于您的链接：

另一个有趣的方法是

文本笔划

：

    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.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;

    })();
});