1 $group
2 . breadcrumb
3 # centering
4 display inline-block
5 box-shadow 0 0 15px 1px rgba(0, 0, 0, 0.35)
6 overflow hidden
7 border-radius 5px
8 # Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links
9 counter-reset flag
10 . breadcrumb a
11 text-decoration none
12 outline none
13 display block
14 float left
15 font-size 12px
16 line-height 36px
17 color white
18 # need more margin on the left of links to accomodate the numbers
19 padding 0 10px 0 60px
20 background #666
21 background linear-gradient(#666, #333)
22 position relative
23 # since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links
24 . breadcrumb a:first-child
25 padding-left 46px
26 border-radius 5px 0 0 5px
27 # to match with the parent's radius
28 . breadcrumb a:first-child:before
29 left 14px
30 . breadcrumb a:last-child
31 border-radius 0 5px 5px 0
32 # this was to prevent glitches on hover
33 padding-right 20px
34 # hover/active styles
35 . breadcrumb a.active
36 + .breadcrumb a:hover
37 background #333
38 background linear-gradient(#333, #000)
39 . breadcrumb a.active:after
40 + .breadcrumb a:hover:after
41 background #333
42 background linear-gradient(135deg, #333, #000)
43 # adding the arrows for the breadcrumbs using rotated pseudo elements
44 . breadcrumb a:after
45 content ''
46 position absolute
47 top 0
48 right -18px
49 # half of square's length
50 # same dimension as the line-height of .breadcrumb a
51 width 36px
52 height 36px
53 #
54 # as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's:
55 # length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
56 # if diagonal required = 1; length = 1/1.414 = 0.707
57 transform scale(0.707) rotate(45deg)
58 # we need to prevent the arrows from getting buried under the next link
59 z-index 1
60 # background same as links but the gradient will be rotated to compensate with the transform applied
61 background #666
62 background linear-gradient(135deg, #666, #333)
63 # stylish arrow design using box shadow
64 box-shadow 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1)
65 #
66 #
67 # 5px - for rounded arrows and
68 # 50px - to prevent hover glitches on the border created using shadows
69 border-radius 0 5px 0 50px
70 # we dont need an arrow after the last link
71 . breadcrumb a:last-child:after
72 content none
73 # we will use the :before element to show numbers
74 . breadcrumb a:before
75 content counter(flag)
76 counter-increment flag
77 # some styles now
78 border-radius 100%
79 width 20px
80 height 20px
81 line-height 20px
82 margin 8px 0
83 position absolute
84 top 0
85 left 30px
86 background #444
87 background linear-gradient(#444, #222)
88 font-weight bold
89 . flat a
90 + .flat a:after
91 background white
92 color black
93 transition all 0.5s
94 . flat a:before
95 background white
96 box-shadow 0 0 0 1px #ccc
97 . flat a:hover
98 + .flat a.active
99 + .flat a:hover:after
100 + .flat a.active:after
101 background #9EEB62