Css3 adds a semi-circular navigation bar to the page

It mainly utilizes the rolate (rotation) and skew (skew) styles of css3.

First run the Code:

Html is simple

+   
 
 
       
  
  
       
  
  
       
  
  
       
  
  
       
  
  
   
 
 

The I tag here uses a third-party library http://fortawesome.github.io/Font-Awesome/icons/

Next is css.

A semi-circular button

.cn-button {outline: none;border: none;color: #f06060;text-align: center;font-size: 1.8em;padding-bottom: 1em;height: 3.5em;width: 3.5em;background-color: #fff;position: fixed;left: 50%;margin-left: -1.75em;bottom: -1.75em;border-radius: 50%;cursor: pointer;z-index: 11;}

What mainly works is

border-radius: 50%;

If you want to turn a div into a circle, you can use this line of code. What about the semi-circle? It's okay if you block the remaining half!

We also turn cn-warpper into semi-circular

.cn-wrapper {width: 26em;height: 26em;position: fixed;z-index: 10;bottom: 0;left: 50%;margin-left: -200px;border: 1px solid #7C5089;-webkit-transition: all .3s ease;transition: all .3s ease;border-radius: 50%;overflow: hidden;bottom: -13em;-webkit-transform: scale(0);}

-webkit-transform: scale(0);

Is to make it not displayed at the beginning

Next is the first scene. How can we divide the semi-circle into five li

First, add the basic style, width and height to li to overlap them.

.cn-wrapper li {position: absolute;font-size: 1.5em;width: 10em;height: 10em;overflow: hidden;-webkit-transform-origin: 100% 100%;transform-origin: 100% 100%;background-color: #eee;-webkit-transition: all 1s ease;transition: all 1s ease;color: #aaa;}

overflow: hidden;

This must be available, as described later!

Why is li skew? If they are all square, how else can we score points ??

.cn-wrapper li:first-child {left: 50%;top: 50%;margin-top: -1.3em;margin-left: -10em;overflow: hidden;-webkit-transform: rotate(0deg) skew(50deg);}

Key to skew

-webkit-transform: rotate(0deg) skew(50deg);

Skew (50deg) is a horizontal tilt of 50 degrees (also called degree). rotate rotates 0 degrees around itself, that is, it does not turn, the first li does not need to turn, only tilt can be used, why do I rotate the li at 36 degrees in turn? 180/5

Then there is a under li.

.cn-wrapper li a {display: block;font-size: 1.2em;height: 14.5em;width: 13.5em;position: absolute;bottom: -6.75em;right: -6.75em;text-decoration: none;color: white;-webkit-transition: background-color .3s ease, -webkit-transform .8s ease;transition: background-color .3s ease, -webkit-transform .8s ease;transition: background-color .3s ease, transform .8s ease;text-align: center;padding-top: 2em;padding-right: 20px;-webkit-transform: skew(-50deg) rotate(-70deg);}

text-align: center;padding-top: 2em;padding-right: 20px;

These are all for setting the icon location, there is nothing to say

-webkit-transform: skew(-50deg) rotate(-70deg);

To cater to the li skew of the parent node, the skew value is negative 50 degrees and the rotate value is negative 70 (so that the icon can display text-align: center in the middle of the div)

Next, you can try to remove the overflow: hidden above. Is it all messy? This code is used to hold the style of its subnode. Even if the style of the subnode is messy, you just need to keep it invisible.

OK, then there are some basic styles.

All code:

 Insert title here
 +   
 
 
       
  
  
       
  
  
       
  
  
       
  
  
       
  
  
   
 
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script><script type="text/javascript">var button = $("#cn-button");button.click(function(){$("#cn-wrapper").toggleClass("open");if (button.text() === "+") {button.text("-");} else {button.text("+");}});//button.addEventLis</script>