gpt4 book ai didi

html - 如何将列表项与 svg 多边形对齐?

转载 作者:太空宇宙 更新时间:2023-11-03 18:26:12 24 4
gpt4 key购买 nike

我想创建一个带有 svg 三 Angular 形 mask 的导航栏。我的问题是我不知道如何将我的三 Angular 形与列表项对齐。在以前的 stackoverflow 用户的帮助下,我能够 fork 他们的 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/

是否可以将列表项与三 Angular 形对齐?如果没有,他们是否有另一种解决方案来实现这一目标?我想稍后使用平移机制为三 Angular 形设置动画。

最佳答案

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

关于html - 如何将列表项与 svg 多边形对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20777686/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com