ギザギザボーダーの向きを下向きにしたいのですが
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;
}
お礼
いつも的確なご回答ありがとうございます。 仕様書のそのページを探すのも、なかなかたどり着けずについ質問してしまいました…。 いちおう、ちょっと表示はヘンでしたがなんとなくやりたいことができました。 後はきちんとレイアウトができることと、webkitへの対応は自分で探してみたいと思います。 今回も助かりました！