如何创建透视三角形？答案

【问题标题】：How to create a see-through triangle?如何创建透视三角形？
【发布时间】：2013-12-18 04:32:05
【问题描述】：

我正在尝试创建一个带有三角形切口的导航栏。我整理了一个示例，以便您了解我所追求的：

http://www.volinux.org/test3

如您所见，在这种情况下，我使用了边框技巧来创建我的三角形，但是它无法使用，因为导航栏有背景图像。我尝试使用网络上的无数示例来实现许多替代方案，例如 SVG 或旋转 div 与反向旋转带有背景的内部 div 以创建三角形，但是我没有成功地制作出一些实体。

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

我希望你们中的某个人能指出我正确的方向。不管是SVG、CSS3还是什么的，但它必须能在IE9及以上时代开始的所有浏览器上运行，而且必须坚如磐石。

我期待任何建议。

我添加了我想要实现的目标的草图：

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

【问题讨论】：

链接断开 (volinux.org/test3)
最好更新该链接并发布您正在使用的代码示例。
不...没有损坏。但是在所有服务器上都可见需要相当长的时间。对不起。

标签： html css svg

【解决方案1】：

您可以通过使用那个小三角形创建蒙版来使用 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)'/>

应该使用translate(x,y) 移动那个三角形transform 属性。

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

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

JSFiddle

【讨论】：

这对我有用，如果我现在可以通过无序列表添加导航项并将该三角形与列表项的中心对齐。你能用这个扩展你的小提琴吗？
我已经把你的 fiddle 放在这里了jsfiddle.net/billy2020/W6vf8 翻译动画不是问题，现在我只需要将初始三角形与列表项之一对齐。
为了对齐，获取项目的位置并添加一些值。这是一个示例：jsfiddle.net/W6vf8/1。最初我想添加一半的 itme 大小，但后来我发现它看起来不太好。
是的，我的错，文本没有居中，还必须减去三角形宽度的一半：jsfiddle.net/Kvgk6 总而言之，我有一个可行的解决方案。但我认为如果禁用 javascript 就没有办法对齐三角形？
不错。我个人不知道一些没有 javascript 的方法来做 alignmet。

【解决方案2】：

为该元素设置以下样式：

background: transparent;

【讨论】：

有人将此标记为低质量。考虑添加一些解释。
请查看链接以了解我想要实现的目标。
是的，我做到了，对不起，我的错
@user3097651 看看 CSS Masking
@Mr.外星人，谢谢，我已经有了。但我缺乏实施它的必要技能。如果您能提供帮助，我将不胜感激。