1div{
2 height: 650px;
3 background:#ccc;
4 /*the magic happens here*/
5 border-top:42px solid #fff;
6}
7ul{
8 top: 0;
9 width: 100%;
10 height:20px;
11 position: fixed;
12 background: deeppink;
13 margin:0;
14 padding:10px;
15}
16li{
17 float:left;
18 list-style:none;
19 padding-left:10px;
20}
21div:first-of-type{
22 margin-top:0;
23}
1<!-- content to be placed inside <body>…</body> -->
2<ul>
3 <li><a href="#s1">link 1</a>
4 <li><a href="#s2">link 2</a>
5 <li><a href="#s3">link 3</a>
6 <li><a href="#s4">link 4</a>
7</ul>
8<div id="s1" class="first">1</div>
9<div id="s2">2</div>
10<div id="s3">3</div>
11<div id="s4">4</div>