我正在尝试用
CSS3完成非常类似于下图的内容.
唯一的区别是最后一个div会有尖头.
在我寻找类似于适应的东西时,我遇到了this js fiddle,它非常接近我想做的事情,但引入了两个问题:第一,它是用帆布完成的,第二,它迫使我有效地“画”箭头每个箭头两次 – 一个用于div,一个用于下一个箭头之前的空格.必须有一些更清洁的方式这样做 – 有人可以在这里给我一些方向吗?
解决方法
试试这个 –
http://jsfiddle.net/ksNr3/8/
ul { margin: 20px 60px; } ul li { display: inline-block; height: 30px; line-height: 30px; width: 100px; margin: 5px 1px 0 0; text-indent: 35px; position: relative; } ul li:before { content: " "; height: 0; width: 0; position: absolute; left: -2px; border-style: solid; border-width: 15px 0 15px 15px; border-color: transparent transparent transparent #fff; z-index: 0; } ul li:first-child:before { border-color: transparent; } ul li a:after { content: " "; height: 0; width: 0; position: absolute; right: -15px; border-style: solid; border-width: 15px 0 15px 15px; border-color: transparent transparent transparent #ccc; z-index: 10; } ul li.active a { background: orange; z-index: 100; } ul li.active a:after { border-left-color: orange; } ul li a { display: block; background: #ccc; } ul li a:hover { background: pink; } ul li a:hover:after { border-color: transparent transparent transparent pink; }
更新 – 使其可点击并最小化重叠区域 – http://jsfiddle.net/ksNr3/8/
原文地址:https://www.jb51.cc/css/215485.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。