CSS のみで画像を使わず border を2本引いて影っぽくするには :before 擬似要素を使うと便利

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

header .menu {
 z-index: 10;
 position: relative;
 border-bottom: 1px #ff3700 solid;
}
header .menu:before {
 bottom: 0;
 content: "";
 display: block;
 left: 0;
 position: absolute;
 right: 0;
 top: 0;
 z-index: -1;
 border-bottom: 1px #d32f02 solid;
}