<body>
<div class='square-top'></div>
<div class='triangle-border'></div>
<div class='square-bottom'></div>
</body>
body{
width:500px;
margin: 0 auto;
background-color: red;
}
.square-top{
background-color:white;
height:100px;
}
.triangle-border{
border-left: 250px solid blue;
border-right: 250px solid green;
border-top: 20px solid blue;
border-bottom: 20px solid green;
}
.square-bottom{
background-color:black;
height:100px
}
angular.module('myModule', ['RecursionHelper']).directive("tree", function(RecursionHelper) {
return {
restrict: "E",
scope: {family: '=', level='@'},
template:
'<p>{{ family.name }}{{test }}</p>'+
'<ul>' +
'<li ng-repeat="child in family.children">' +
'<tree family="child" level="{{(level)?level + 1: 1}}"></tree>' +
'</li>' +
'</ul>',
compile: function(element) {
return RecursionHelper.compile(element, function(scope, iElement, iAttrs, controller, transcludeFn){
});
}
};
});
Есть такая штука, как Layer Comps, которая позволяет сохранять состояния и положение слоёв. Скрываемые папочки — это костыль, который используют неопытные дизайнеры.