Question

我期望得到集思广益援助。

我正在编织一个设计师聚集一堂的布局,试图想出一种办法,处理一种横向导航,这种航向ang,从蓝色背景到选择连接的白色背景。

I ll actually just include a screenshot. This is actually the navigation for a Tabbed content area. The top half of the screenshot shows what it will look like when the first tab is selected. The bottom half of the screenshot shows the 2nd tab selected.

https://i.stack.imgur.com/P34yI.gif

因此,我的问题是,超文本元素是试采的,而不是 rec的边缘。我挽救了阴影的边缘,把它当作一个特别安全局的背景,并做了一些细微的工作,直到我认识到,每一个环节都能够翻开白色,而BG形象的下线有一部分能够给角带来幻觉,因此,最左边的环节将需要不同的背景,即中间环节和最正确的联系等等。

我可以给每个联系人分配一个独特的类别/(或使用儿童),但我希望保持解决办法的灵活性,以便我今后能够增加另一个联系/表格。

I was curious if anyone had any ideas on how to create this appearance by possibly using CSS3 / HTML5 / or some transparent PNG and negative margins or relative positioning?

我不要求制定法规,也不要求你为我工作: 我只想思想——只是社区集思广益的一部分。如果有人提出建议,请让我知道,这可能导致我找到解决办法。

感谢!

Answer 1

假设你再使用一只ul子;一只li子;一只菜 structure结构,我将使用两个ang子背景(右边和左边......右边大约为27px,左边大约为22px)。将左角应用于<代码><li>和右角至<a>。这将使每个清单项目的背景情况翻一番,因此,你应当利用<代码><li>每一边的负差幅来拉开其兄弟姐妹的重叠。然后使用z-index来确保对 h进行控制,或强调菜单项目在对方的顶端。我补充说,双方又增加了30px的婚礼,以便在案文周围创造额外的空间:

li {
    margin-right: -27px;
    margin-left: -22px;
    padding-left: 52px;
    position: relative;
    background: url(leftcorner.jpg) left top no-repeat;
    background-color: #3aa1cc
}

li a {
    padding-right: 57px;
    background: url(rightcorner.jpg) right top
}

li:hover {z-index: 5; background: url(leftcorner-hover.jpg) left top no-repeat}
li:hover a {background: url(rightcorner-hover.jpg) left top no-repeat}

我已经对此进行了测试,但我认为,它应当努力......也许会增加一些 t。

这一解决办法不包括微妙的内层阴影,即你不得不在<代码><li>上使用1px重复级的梯度;然后使用:之前和之后,为两个角落的背景图像提供假肢。

此外,在我的法典中,我有两条缝.(热和 h),但你确实应该使用间谍和背景,这样就没有闪点,而国家形象的 h却在装上。

友情链接