CSS exercises-separated by diagonal lines in the navigation bar-use pseudo elements-five trees and ten racks

CSS exercises-separated by diagonal lines in the navigation bar-use pseudo elements-five trees and ten racks

Start to cut the first image. The first problem is that the top navigation bar is separated by a diagonal line. The idea is to use a pseudo class: before or: after.

Write the html structure first.

 
Home About Features Blog Shop
2


 

Style again

. Link: before {content: "/"; margin: 0 24px; color: gray;}. link: first-child: before {display: none ;}

First use: bofore, set the content to "/", front and back margin, color. Use first-child to remove the pseudo class before the first element.

The result is as follows:

It seems that there is no large oblique angle in the design diagram ......