Question

我想创建一个带有svg三角形蒙版的导航栏。我的问题是我不知道如何将我的三角形与列表项对齐。在之前的stackoverflow用户的帮助下，我能够分叉他们的jsfiddle并提出以下html代码：

<body>

<svg>
    <defs>
        <rect id='tri-bar' width="100%" height="100%"/> 
        <mask id='tri-mask'>
             <use xlink:href='#tri-bar' fill='white'/>
             <polygon transform='translate(500,0)' points='0 101, 10 90, 20 101' fill='black'/>
        </mask>
    </defs>

    <image xlink:href="http://placekitten.com/g/700/100" width="100%" height="100%" class="target" />

</svg>

<div> 
<ul>
     <li>Blah</li>
     <li>BLih</li>    
     <li>Blah</li>
     <li>BLih</li>
</ul>
</div>    
</body>

以及以下css：

body {
    width: 100%;
    height: 100%;
    background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll;
    margin: 0;
    padding: 0;
}

ul {
    padding: 0;
    margin-top: 60px;
    list-style: none;
    background-color: blue;
    color: white;
}

ul li {
    float: right;
    width: 10%;
}

svg, div {
    position: absolute;
    top: 0;
    left: 0;
    width: 700px;
    height: 100px;
    z-index: -1;
}

.target {
    mask: url(#tri-mask);
}

这是一个有用的jsfiddle，说明了我想要实现的目标：http://jsfiddle.net/billy2020/W6vf8/

是否可以将列表项与三角形对齐？如果不是，他们的另一个解决方案是实现这一目标我想稍后使用translate机制为三角形设置动画。

Answer 1

如果一方或另一方是单色，那么我会选择CSS三角技巧。我也创建了一个负三角形：http://codepen.io/gionkunz/pen/ihgwH

如何使用svg多边形对齐列表项？

1 个答案: