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

This topic created in 2602 days ago, the information mentioned may be changed or developed.

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

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

Supplement 1 · Sep 28, 2019

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

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

默认状态背景图：

高亮状态背景图：

导航条

大佬

导航

前端

19 replies • 2019-09-27 18:17:40 +08:00

kdylan

Sep 27, 2019

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

TangMonk

Sep 27, 2019

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

Chappako

Sep 27, 2019

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

TangMonk

Sep 27, 2019

@Chappako #3 用 sprite 就行了嘛

RaymondYip

Sep 27, 2019

全图片。稳如狗

7gugu

Sep 27, 2019 via Android

用一下自适应，scale 这些

U7Q5tLAex2FI0o0g

Sep 27, 2019

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

redbuck

Sep 27, 2019

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

markzyh

Sep 27, 2019

图片吧，又不是不能用

ochatokori

Sep 27, 2019 via Android

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

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

redbuck

Sep 27, 2019

<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);
}