css剪輯路徑替代

我想爲我的網站做一個橫幅，有點不同。css剪輯路徑替代

我想下邊框，是一種「向下箭頭」尋找

事情是這樣的：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在這種情況下，結果更多的是「聊天泡泡」效果。

有沒有辦法做到這一點，因爲我都沒有想法。

來源

2016-06-11 Sebastjan

您可以使用本答案中提到的'skew'方法 - http://stackoverflow.com/questions/30368404/how-to-create-a-polygon-shape-div/30370429#30370429。我不明白你的意思是「聊天泡泡」效應。也許如果你演示一個演示，我可以幫助微調它。 SVG將是你最好的選擇。 – Harry

檢查[this]（https://jsfiddle.net/alireza_safian/qkvz8z1j/10/） – Alex

只是注意到，Firefox已經支持'clip-path'參考SVG''元素的年齡和基本形狀像大約一年的「多邊形」（沒有前綴）。它需要''about：config'中的'layout.css.clip-path-shapes.enabled'標誌設置爲'true'。 – Ana

我試過改變箭頭邊框看起來不那麼凌亂。

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

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

來源

2016-06-11 12:31:26 night11

請檢查您的鏈接。我想這個jfiddle是另一個問題。 –

感謝您的注意:) – night11

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>

來源

2016-06-11 13:24:41

-2

不要只使用部分解決方案過於複雜了。最好的方式是從IE 4.0開始支持的一種方式！只需使用具有多邊形形狀的區域標籤和路徑的座標即可。 More info here.

來源

2017-05-18 16:33:15

css剪輯路徑替代

回答

相關問題