我试图在我的SELECTED水平和垂直菜单链接中应用纯CSS箭头,但似乎无法弄清楚我想要的结果.在stackoverflow中有一些类似的解决方案,但它并不能解决我的问题.
UL有一个边界,这是问题来自…但我不应该删除UL边界.
<li class="selected"><a href="#">Arrow please</a></li>
ul.hor {
border-bottom: 3px solid blue;
}
ul li {
display: inline-block;
position: relative;
}
ul li a {
display: block;
padding: 10px 15px;
}
ul li.selected a {
color: green;
}
ul li.selected:after {
content: "";
width: 12px;
height: 12px;
position: absolute;
background: #fff;
border-top: 3px solid blue;
border-right: 3px solid blue;
}
ul.hor li.selected:after {
left: 0;
right: 0;
bottom: -8px;
margin: 0 auto;
-moz-transform: rotate(315deg);
-webkit-transform: rotate(315deg);
-ms-transform: rotate(315deg);
}
ul.ver li.selected:after {
right: -8px;
top: 50%;
margin-top: -6px;
-moz-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
-ms-transform: rotate(225deg);
}
ul.ver {
width: 200px;
border-right: 3px solid blue;
}
ul.ver li {
display: block;
}
ul.ver li a {
display: block;
padding: 10px 15px;
}
body {
width: 90%;
margin: 20px auto;
background: rgb(229,180,230);
background: -moz-linear-gradient(30deg,rgb(229,230) 30%,rgb(90,140,250) 70%);
background: -webkit-linear-gradient(30deg,250) 70%);
background: -o-linear-gradient(30deg,250) 70%);
background: -ms-linear-gradient(30deg,250) 70%);
background: linear-gradient(120deg,250) 70%);
}
<ul class="hor"> <li><a href="#">Lorem</a></li> <li><a href="#">Ipsum</a></li> <li class="selected"><a href="#">Sit amet</a></li> <li><a href="#">Consectetur</a></li> </ul> <br> <ul class="ver"> <li><a href="#">Lorem</a></li> <li><a href="#">Ipsum</a></li> <li class="selected"><a href="#">Sit amet</a></li> <li><a href="#">Consectetur</a></li> </ul>
解决方法
这一个更容易定位,并有一个完美的三角形.我们仍在使用变换旋转,但不需要变形偏移.也不需要计算宽度.
Fiddle here.
Fiddle here.
ul {
overflow: hidden;
}
li {
display:inline-block;position: relative;
}
ul li a {
display: block;padding:20px 15px;
}
ul li.selected a {
color: green;
}
ul.hor li.selected:before,ul.hor li.selected:after {
content: "";
bottom: 0;
position: absolute;
border-bottom:3px solid blue;
width:9999px;
margin:0 10px;left:50%;
}
ul.hor li.selected:after {
left:auto;right:50%;
}
/*vertical menu starts*/
ul.ver {
width: 200px;
}
ul.ver li {
display: block;
}
ul.ver li a {
padding:10px 15px;
}
ul.ver li.selected:before,ul.ver li.selected:after {
content: "";
position: absolute;
top:50%;
right: 0;
border-right:3px solid blue;
height:9999px;
margin:10px 0
}
ul.ver li.selected:after {
top:auto;bottom:50%;
}
/*arrow starts*/
ul li.selected a:after {
content: "";
width: 15px;
height: 15px;
position: absolute;
border: solid blue;
border-width: 3px 3px 0 0;
}
ul.hor li.selected a:after {
top:100%;
left: 0;
right: 0;
margin: -10px auto 0;
-moz-transform: rotate(315deg);
-webkit-transform: rotate(315deg);
-ms-transform: rotate(315deg);
}
ul.ver li.selected a:after {
left:100%;
margin-left:-10px;
-moz-transform:rotate(225deg);
-webkit-transform:rotate(225deg);
-ms-transform:rotate(225deg);
}
body {
width:90%;margin:20px auto;
background: rgb(229,230);
background: -moz-linear-gradient(30deg,250) 70%);
background: -webkit-linear-gradient(30deg,250) 70%);
background: -o-linear-gradient(30deg,250) 70%);
background: -ms-linear-gradient(30deg,250) 70%);
background: linear-gradient(120deg,250) 70%);
}
<ul class="hor"> <li><a href="#">Lorem</a></li> <li class="selected"><a href="#">Ipsum</a></li> <li><a href="#">Sit amet</a></li> <li><a href="#">Consectetur</a></li> </ul> <br> <ul class="ver"> <li class="selected"><a href="#">Lorem</a></li> <li><a href="#">Ipsum</a></li> <li><a href="#">Sit amet</a></li> <li><a href="#">Consectetur</a></li> </ul>
