ギザギザボーダーの向きを下向きにしたいのですが

質問

CSS3初心者です。宜しくお願いします。

Jagged Border
http://codepen.io/SomeStuffer/details/uwstc

ヘッダーとフッターに配置したいのですが、
ヘッダーでギザギザが逆にならなくて困ってます。

画像のようにしたいのですが、CSSのどの部分を変更したらよいでしょうか。
宜しくお願いします。

.jagged-border {
position: relative;
width: 100%;
height: 50px;
-webkit-filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 1px 2px);
filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 1px 2px);
}
.jagged-border:before {
content: "";
display: block;
position: absolute;
top: -10px;
width: 100%;
height: 10px;
}

.lightgray-bg {
background: #ECF0F1;
}
.lightgray-bg:before {
background: -webkit-linear-gradient(45deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%);
background: linear-gradient(45deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%);
-webkit-background-size: 20px 40px;
background-size: 20px 40px;
}
.white-bg {
background: #FFF;
}
.white-bg:before {
background: -webkit-linear-gradient(45deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%);
background: linear-gradient(45deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%);
-webkit-background-size: 20px 40px;
background-size: 20px 40px;
}
.darkgray-bg {
background: #C3C9CC;
}
.darkgray-bg:before {
background: -webkit-linear-gradient(45deg, transparent 33.333%, #c3c9cc 33.333%, #c3c9cc 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, #c3c9cc 33.333%, #c3c9cc 66.667%, transparent 66.667%);
background: linear-gradient(45deg, transparent 33.333%, #c3c9cc 33.333%, #c3c9cc 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #c3c9cc 33.333%, #c3c9cc 66.667%, transparent 66.667%);
-webkit-background-size: 20px 40px;
background-size: 20px 40px;
}

回答No.1

noname#199520

逆向きの画像を作ったほーが早いし楽だよ

補足

一度設置すれば後はそれほど変更することもないと思いますので。