Pure CSS for breadcrumb-style navigation

Refer to someone else's tutorial and imitate it:

Html:

   <DivID= "Crumbs">        <ul>                <Li><ahref="#">Breadcrumb</a></Li>        </ul></Div> 

Css:

#crumbs ul Li a{Display:Block;float: Left;Height:50px;background:#3498db;text-align:Center;padding:30px 40px 0 40px;position:relative;margin:0 10px 0 0;font-size:20px;text-decoration:None;Color:#fff;}#crumbs ul Li A:after{Border-top:40px Solid Transparent;Border-left:40px Solid #3498db;Border-bottom:40px Solid Transparent;content:"';position:Absolute; Right:-40px;Top:0; }#crumbs ul Li A:before{Border-top:40px Solid #3498db;Border-left:40px Solid Transparent;Border-bottom:40px Solid #3498db;content:"';position:Absolute; Right:180px;Top:0; }

Note: Even if the content does not set any characters, it is necessary to write out the content is empty, otherwise it will not show

Pure CSS for breadcrumb-style navigation