A three-dimensional navigation bar made with CSS3 and pseudo-elements for your reference, the code is as follows:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>CSS Making stereoscopic navigation</title> <Linkrel= "stylesheet"href= "Http://www.w3cplus.com/demo/css3/base.css"> <style>Body{background:#ebebeb; }. Nav{width:560px;Height:50px;Font:Bold 0/50px Arial;text-align:Center;margin:40px Auto 0;background:#f65f57; /*Make a circle*/Border-radius:8px; /*make navigation stereoscopic style*/Box-shadow:0px 7px Red; }. Nav a{Display:Inline-block;-webkit-transition:All 0.2s ease-in;-moz-transition:All 0.2s ease-in;-o-transition:All 0.2s ease-in;-ms-transition:All 0.2s ease-in;transition:All 0.2s ease-in;Color:#fff; }. Nav a:hover{-webkit-transform:Rotate (10deg);-moz-transform:Rotate (10deg);-o-transform:Rotate (10deg);-ms-transform:Rotate (10deg);Transform:Rotate (10deg);text-decoration:None; }. Nav Li{position:relative;Display:Inline-block;padding:0 16px;font-size:13px;Text-shadow:1px 2px 4px rgba (0,0,0,.5);List-style:None outside None; } /*Delete First and last navigation divider lines*/. Nav Li:first-child::before{Background-image:None; } /*Creating a navigation list item divider using pseudo-elements*/. Nav Li:before{content:"";Color:#666;position:Absolute;Top:18px;Height:20px; Left:-1px;width:1px;Background-image:linear-gradient (to bottom, #f65f57, #993333, #f65f57); }</style></Head><Body> <ulclass= "NAV"> <Li><ahref="">Home</a></Li> <Li><ahref="">About Me</a></Li> <Li><ahref="">Portfolio</a></Li> <Li><ahref="">Blog</a></Li> <Li><ahref="">Resources</a></Li> <Li><ahref="">Contact Me</a></Li> </ul></Body></HTML>
A stereo navigation bar made with CSS3 and pseudo-elements