cssクリップパスの代替方法

Question

私のウェブサイトのバナーを少し違ってやろうとしています。

私は種類のこのような

何か探して "下矢印" であるためには、下の境界をしたい：JS FIDDLE

.indexBanner { 
 
    background-image: url('https://i.stack.imgur.com/dFUnt.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-size: cover; 
 
    background-color: #404040; 
 
    height: 500px; 
 
    position: relative; 
 
    -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 85%, 50% 100%, 0 85%, 0 0); 
 
}

<div class="indexBanner"></div>

しかし、現在、私はクリップパスを使用しています、これをFirefoxとIEではサポートされていません。 また、「矢印の形をした」ボーダーが少し乱雑であることがわかります。

私はまた、transform: skewを試しました。この場合、結果は「チャットバブル」のようなものでした。

私はすべてのアイデアがないので、これを行う方法はありますか？

Answer 1

私は矢の境界線をあまり目立たないように変更しようとしました。

https://jsfiddle.net/night11/b7ch05Ln/ -

-webkit-clip-path: polygon(0 1%, 100% 0, 100% 60%, 50% 100%, 0 60%); 

Answer 2

https://jsfiddle.net/glebkema/h18w341m/

.indexBanner { 
 
    background-image: url('http://nauci.se/Flipo/assets/images/study.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-size: cover; 
 
    background-color: #404040; 
 
    height: 500px; 
 
    position: relative; 
 
    overflow-x: hidden; 
 
} 
 
.indexBanner:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 50vw solid white; 
 
    border-right: 50vw solid white; 
 
    border-top: 15vw solid transparent; 
 
}

<div class="indexBanner"> 
 
</div>

Answer 3

を更新することは部分的にしか解決策を使用してそれをovercomplicateしようとしないでください。最善の方法は、IE 4.0以来サポートされている方法です！多角形のエリアタグとあなたのパスの座標を使用してください。 More info here.