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剪辑路径替代

回答

相关问题