Question

我使用下面的例子来制作雪佛龙，但我无法在每个雪佛龙周围创建黑色边框。

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;

    })();
});

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

由于 Mitul J

Answer 1

您需要将附加到li的三角形着色为所需的边框颜色，并将两个新三角形添加到内部元素（span）以创建＆＃34;幻觉＆＃34;带边框的三角形。这个问题已经在stackoverflow上详细回答了两次：）

可以帮助您的链接：

Adding border to CSS triangle



CSS triangle custom border color


另一个有趣的方法text-stroke：   Create a triangle with CSS?

在AgularJS中创建带边框的雪佛龙

1 个答案:

可以帮助您的链接：