Ajax Loader
×
HTML 
<div class="ribbon">
1
<div class="ribbon">
2
  <a href="#"><span>Home</span></a>
3
  <a href="#"><span>About</span></a>
4
  <a href="#"><span>Services</span></a>
5
  <a href="#"><span>Contact</span></a>
6
</div>
 
CSS 
* {
1
* {
2
        /* Basic CSS reset */
3
        margin:0;
4
        padding:0;
5
      }
6
 
7
      body {
8
        /* These styles have nothing to do with the ribbon */
9
        background: #333;
10
        padding:35px 0 0;
11
        margin:auto;
12
        text-align:center;
13
      }
14
 
15
      .ribbon {
16
        display:inline-block;
17
      }
18
 
19
      .ribbon:after, .ribbon:before {
20
        margin-top:0.5em;
21
        content: "";
22
        float:left;
23
        border:1.5em solid #fff;
24
      }
25
 
26
      .ribbon:after {
27
        border-right-color:transparent;
28
      }
29
 
30
      .ribbon:before {
31
        border-left-color:transparent;
32
      }
33
 
34
      .ribbon a:link, .ribbon a:visited {
35
        color:#000;
36
        text-decoration:none;
37
          float:left;
38
          height:3.5em;
39
        overflow:hidden;
40
      }
41
 
42
      .ribbon span {
43
        background:#fff;
44
        display:inline-block;
45
        line-height:3em;
46
        padding:0 1em;
47
        margin-top:0.5em;
48
        position:relative;
49
 
50
        -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
51
        -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
52
        -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
53
        -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
54
        transition: background-color 0.2s, margin-top 0.2s;
55
      }
56
 
57
      .ribbon a:hover span {
58
        background:#FFD204;
59
        margin-top:0;
60
      }
61
 
62
      .ribbon span:before {
63
        content: "";
64
        position:absolute;
65
        top:3em;
66
        left:0;
67
        border-right:0.5em solid #9B8651;
68
        border-bottom:0.5em solid #fff;
69
      }
70
 
71
      .ribbon span:after {
72
        content: "";
73
        position:absolute;
74
        top:3em;
75
        right:0;
76
        border-left:0.5em solid #9B8651;
77
        border-bottom:0.5em solid #fff;
78
      }
79
 
 

Untitled

CSSDeck G+