3

cssのみを使用して、逆円錐形のレスポンシブ幅のdivを作成する方法を知っている人はいますか(添付のコードスニペットを参照)。また、この div には背景画像 (パターン) を繰り返す必要があります。

私はclipPathを使用しようとしました: 

#div {
	height: 100%;
	width: 100%;
	-webkit-clip-path: polygon(50% 90px, 100% 0%, 100% 100%, 0 100%, 0 0);
	clip-path: polygon(50% 25%, 100% 0, 100% 100%, 0 100%, 0 0);
background: blue;
  padding-top: 160px;
}
<div id="div"></div>

これは Safari と Chrome では問題なく動作しますが、Mozilla、Opera、または IE では動作しません。関連するすべてのブラウザで達成する方法はありますか?

どんな助けでも大歓迎です。

4

2 に答える 2

2

固定角度の代わりに、辺または角の値で使用linear-gradientします。変換を使用してその形状を作成することもできますが、それには JS をレスポンシブにする必要があります。

フィドル

body {
    background-color: blue;
    margin: 0;
    padding: 0;
}
div {
    height: 150px;
    width: 100%;
    position: relative;
}
div:after, div:before {
    content:"";
    position: absolute;
    height: inherit;
    width: 50%;
}
div:before {
    left: 0;
    background: -webkit-linear-gradient(to bottom left, white 50%, transparent 50%);
    background: -moz-linear-gradient(to bottom left, white 50%, transparent 50%);
    background: -o-linear-gradient(to bottom left, white 50%, transparent 50%);
    background: linear-gradient(to bottom left, white 50%, transparent 50%);
}
div:after {
    right: 0;
    background: -webkit-linear-gradient(to bottom right, white 50%, transparent 50%);
    background: -moz-linear-gradient(to bottom right, white 50%, transparent 50%);
    background: -o-linear-gradient(to bottom right, white 50%, transparent 50%);
    background: linear-gradient(to bottom right, white 50%, transparent 50%);
}
<div></div>

于 2015-03-05T09:35:47.223 に答える