请教前端大佬这种导航条怎么做？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 1882 天前的主题，其中的信息可能已经有所发展或是发生改变。

我是后端开发，最近有个项目需要自己做点前端工作，遇到个导航条不知道怎么做，还请各位前端大佬指点一下，不胜感激。

下图是美工切出来的导航条背景图，我需要在每个菱形的正中显示菜单文字，还要保证窗口大小改变时不会显示错乱，应该怎么做呢？

第 1 条附言 · 2019-09-28 20:34:27 +08:00

非常感谢大家的回复，不能一一回复还望见谅。

在参考了@redbuck的回复后，我找美工切了一个矩形背景图（两张图片，对应两种状态：默认状态和高亮状态），再参考@redbuck给出的代码示例，最终算是完美解决了这个问题，有兴趣的同学可以看一下：http://jsrun.pro/hMbKp

默认状态背景图：

高亮状态背景图：

导航条

大佬

导航

前端

19 条回复 • 2019-09-27 18:17:40 +08:00

kdylan

2019-09-27 10:22:55 +08:00

切图用背景图片呗，
有渐变有高光 css 累死

TangMonk

2019-09-27 10:28:05 +08:00

切图的时候为什么不直接把文字也加到图片里面去，这样也可以啊

Chappako

2019-09-27 10:29:16 +08:00

@TangMonk 把文字加到图片里就要有 5 张图，不加文字就只有 2 张图

TangMonk

2019-09-27 10:30:22 +08:00

@Chappako #3 用 sprite 就行了嘛

RaymondYip

2019-09-27 11:15:15 +08:00

全图片。稳如狗

7gugu

2019-09-27 11:22:51 +08:00 via Android

用一下自适应，scale 这些

littleylv

2019-09-27 11:27:57 +08:00

又想要酷炫的效果，又没有专业的前端来做，这是要逼死后端么

redbuck

2019-09-27 11:34:59 +08:00

切开,弄一个矩形背景,设置给每一个 item,然后 transform: skew 倾斜.文字再用一个标签包下,反向 skew 扶正

markzyh

2019-09-27 11:35:19 +08:00

图片吧，又不是不能用

ochatokori

2019-09-27 11:36:27 +08:00 via Android

弄个 div 把图片作为背景，里面放 4 个浮动的 div 当文字和链接

只要你把宽度写死，就不会乱
不会前端的话没必要做成菱形的点击区域，直接长方形的 div 点击就算了

redbuck

2019-09-27 11:38:19 +08:00

<ul class="list">
<li class="item">test</li>
<li class="item">测试</li>
<li class="item">测测测试</li>
</ul>

.list .item{
float: left;
padding: 20px 50px;
background-color: #4c93ff; // 更换成切分后的矩形背景
margin: 0 5px;
-webkit-transform: skew(-30deg);
transform: skew(-30deg);
color: #fff;
}

.list .item span {
display: inline-block;
-webkit-transform: skew(30deg);
transform: skew(30deg);
}