こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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

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;
}

投稿日時 - 2014-08-28 15:43:40

QNo.8733687

困ってます

このQ&Aは役に立ちましたか?

6人が「このQ&Aが役に立った」と投票しています

回答(1)

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

投稿日時 - 2014-08-28 16:06:43

補足

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

投稿日時 - 2014-08-28 19:46:34

あなたにオススメの質問