Создать Chevron с границей в AgularJS

Я использую ниже пример для создания шеврона, но я не могу создать черную рамку вокруг каждого шеврона.

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

    })();
});

Я пробовал модифицировать: до и: после, но ничего не работало, так как шеврон слева и справа создается с использованием свойства border. У меня есть небольшой опыт работы с CSS и использование этого шеврона в одном из требований, которое также просит меня создать границу вокруг него.

Благодаря Mitul J

+2
источник поделиться
1 ответ

Вам нужно покрасить треугольники, прикрепленные к li к вашему желаемому цвету границы и добавить два новых треугольника во внутренний элемент (span), чтобы создать "иллюзию" треугольника с рамкой. Эти вопросы уже были подробно рассмотрены два раза в stackoverflow :)

Ссылки, которые помогут вам:

  1. Добавление границы к треугольнику CSS

  2. Пользовательский цвет границы треугольника CSS

  3. Еще один интересный метод этого text-stroke: создать треугольник с CSS?
0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос