CSS重叠箭头 [英] CSS overlapping arrow
问题描述
imgur.com/gp3Ry.jpgalt =enter image description here>
唯一的区别是最后一个div会有一个尖尖。
在我搜索类似适应的东西时,我遇到了这个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透明#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透明#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透明粉红色;
}
UPDATED 可点击和最小化重叠区域 - http://jsfiddle.net/ksNr3/8/
I'm trying to accomplish something very, very similar to the below picture with CSS3 only.
The only difference is that the last div would have a pointed tip.
In my search for something similar to adapt, I've come across this js fiddle which comes very close to what I want to do, but introduces two problems: first, it's done with canvas, and second, it forces me to "draw" arrows effectively twice for each arrow -- one for the div, and one for the space before the next arrow. There has to be some cleaner way of doing this -- can someone provide me with some direction here?
What I need to know is how to construct what's shown in the above picture -- a series of overlapping div arrows -- with CSS3 only.
Try this - 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;
}
UPDATED - Made it clickable and minimized the overlapping areas - http://jsfiddle.net/ksNr3/8/
这篇关于CSS重叠箭头的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!