C3 makes the navigation bar split line and three-dimensional style, c3 makes the navigation bar split

C3 makes the navigation bar split line and three-dimensional style, c3 makes the navigation bar split

// First write a navigation bar style

. Nav {
Width: 560px;
Height: 50px;
Font: bold 0/50px Arial;
Text-align: center;
Margin: 40px auto 0;
Background: # f65f57;
Border-radius: 10px;/* Create circle */
Color: # F16153;
Box-shadow: 0px 5px 0px # B64B41;


}
// Rotating style in the navigation bar
. Nav {
Display: inline-block;
-Webkit-transition: all 0.2 s transfer-in;
-Moz-transition: all 0.2 s bytes-in;
-O-transition: all 0.2 s bytes-in;
-Ms-transition: all 0.2 s bytes-in;
Transition: all 0.2 s rotation-in; // rotation speed
}
. Nav a: hover {
-Webkit-transform: rotate (20deg );
-Moz-transform: rotate (20deg );
-O-transform: rotate (20deg );
-Ms-transform: rotate (20deg );
Transform: rotate (20deg); // Rotation Angle
}

. Nav li {
Position: relative;
Display: inline-block;
Padding: 0 16px;
Font-size: 13px;
Text-shadow: 1px 2px 4px rgba (0, 0,. 5); // text shadow
List-style: none outside none;
}

/* Use pseudo elements to create the separation line of navigation list items */
. Nav li: before,. nav li: after {
Content :"";
Position: absolute;
Top: 14px;
Height: 25px;
Width: 1px;
}
. Nav li: after {
Right: 0;
Background:-moz-linear-gradient (top, rgba (255,255,255, 0), rgba (255,255,255,. 2) 50%, rgba (255,255,255, 0 ));
Background:-webkit-linear-gradient (top, rgba (255,255,255, 0), rgba (255,255,255,. 2) 50%, rgba (255,255,255, 0 ));
Background:-o-linear-gradient (top, rgba (255,255,255, 0), rgba (255,255,255,. 2) 50%, rgba (255,255,255, 0 ));
Background:-ms-linear-gradient (top, rgba (255,255,255, 0), rgba (255,255,255,. 2) 50%, rgba (255,255,255, 0 ));
Background: linear-gradient (top, rgba (255,255,255, 0), rgba (255,255,255,. 2) 50%, rgba (255,255,255, 0 ));
}
. Nav li: before {
Left: 0;
Background:-moz-linear-gradient (top ,# ff625a, # 9e3e3a 50%, # ff625a );
Background:-webkit-linear-gradient (top ,# ff625a, # 9e3e3a 50%, # ff625a );
Background:-o-linear-gradient (top ,# ff625a, # 9e3e3a 50%, # ff625a );
Background:-ms-linear-gradient (top ,# ff625a, # 9e3e3a 50%, # ff625a );
Background: linear-gradient (top ,# ff625a, # 9e3e3a 50%, # ff625a );
}
/* Delete the first and last navigation separators */
. Nav li: last-child: after {
Width: 0px;
Height: 0px;
}
. Nav,
. Nav a: hover {
Color: # fff;
Text-decoration: none;
}