Question

我正在尝试创建一个带有三角形切口的导航栏。我把一个例子放在一起，这样你就能看出我的目标：

http://www.volinux.org/test3

如您所见，我在这种情况下使用边框黑客来创建我的三角形，但它不可用，因为导航栏有背景图像。我试图在网上使用无数的例子来实现许多替代方案，例如SVG或旋转div，反向旋转内部div和背景以创建三角形，但是我没有成功地拥有一些实体。

我最接近实现此效果的确是旋转技巧和背景附件：已修复，但这在我的情况下不起作用，因为当您开始向上和向下滚动页面时，您会立即注意到该缺陷。

我希望你们中的一位能指出我正确的方向。无论是SVG，CSS3还是其他什么都没关系，但它必须适用于从IE9时代开始的所有浏览器，并且它必须坚如磐石。

我期待任何建议。

我添加了一个我想要实现的草图：

http://www.volinux.org/test3/IMG_0646.jpg

Answer 1

将该元素设置为以下样式：

background: transparent;

Answer 2

您可以通过使用该小三角形创建蒙版来使用SVG执行此操作。这是一个例子：

<svg>
<defs>
    <rect id='tri-bar' width='100%' height='20'/>
    <mask id='tri-mask'>
        <use xlink:href='#tri-bar' fill='white'/>
        <polygon points='0 20, 10 10, 20 20' x='50' fill='black'/>
    </mask>
</defs>

<use xlink:href='#tri-bar' fill='gray' mask='url(#tri-mask)'/>

要移动该三角形transform属性，请使用translate(x,y)。

<polygon transform='translate(50,0)' points='0 20, 10 10, 20 20' x='50' fill='black' />

因此，对于每个动画帧(x,y)都应该被覆盖。

JSFiddle

如何创建透视三角形？

2 个答案: