将纯 css 箭头设置为具有透明或图像背景的菜单？

Question

我正在尝试将纯 css 箭头应用到水平和垂直菜单的 SELECTED link，但似乎无法弄清楚我想要的结果。 Whosebug 上有一些类似的解决方案，但没有解决我的问题。

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, 180, 230) 30%, rgb(90, 140, 250) 70%);
  background: -webkit-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
  background: -o-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
  background: -ms-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
  background: linear-gradient(120deg, rgb(229, 180, 230) 30%, rgb(90, 140, 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>

Answer 1

看看我对水平列表做了什么

ul.hor {
    overflow: hidden;
    padding-bottom: 5px;
}

ul.hor li.selected a:after, 
ul.hor li.selected a:before {
    content: "";
    width: 1000%;
    height: 20px;
    position: absolute;
    left: 59px;
    bottom: -3px;
    border-bottom:3px solid blue;
    z-index: -1;
}
ul.hor li.selected a:after {
    left: auto;
    right: 58px;
}

基本上，不要为 ul 添加边框，而是为非常大的活动元素添加假边框。隐藏 ul 的溢出，瞧！

'http://jsfiddle.net/wvs9o8oy/12/'

Answer 2

更新：发现在 a 元素边框的宽度计算上使用 50.6% 大大减少了某些 window 宽度的子像素问题。片段已更新，这里是 fiddle link：http://jsfiddle.net/5wLe4r3h/

免责声明：我认为这不够优雅。

我将主边框移动到 li 元素。我正在清除 li.selected 边框，并向 a 元素添加 before/after 部分边框。

ul.hor li {
    border-bottom:3px solid blue;
    float: left;
}
ul.hor li.selected {
    border-bottom: none;
}
ul.hor li.selected a:before {
    content:"";
    position: absolute;
    bottom: -3px;
    left: 0px;
    border-bottom:3px solid blue;
    width: calc(50.6% - 9px);
}
ul.hor li.selected a:after {
    content:"";
    position: absolute;
    bottom: -3px;
    right: 0px;
    border-bottom:3px solid blue;
    width: calc(50.6% - 9px);
}
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;
    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:-5px;
    top:50%;
    margin-top:-6px;
    -moz-transform:rotate(225deg);
    -webkit-transform:rotate(225deg);
    -ms-transform:rotate(225deg);
}
ul.ver {
    width:200px;
}
ul.ver li {
    display:block;
    border-right:3px solid blue;
}
ul.ver li a {
    display:block;
    padding:10px 15px;
}
ul.ver li.selected {
    border-right: none;
}
ul.ver li.selected a:before {
    content:"";
    position: absolute;
    top: 0px;
    right: 0px;
    border-right:3px solid blue;
    height: calc(50% - 7px);
}
ul.ver li.selected a:after {
    content:"";
    position: absolute;
    bottom: 0;
    right: 0px;
    border-right:3px solid blue;
    height: calc(50% - 10px);
}
body {
    width:90%;
    margin:20px auto;
    background: rgb(229, 180, 230);
    background: -moz-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
    background: -webkit-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
    background: -o-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
    background: -ms-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
    background: linear-gradient(120deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
}
.clear {
    clear: both;
}

<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>
<div class="clear"></div>
<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>

Answer 3

一种方法是在所选元素上使用伪元素的绝对定位。

箭头是用边框和伪元素 skewX() skewY() 制作的。他们水平菜单的 with 和垂直菜单的高度设置为高值，溢出隐藏在 <ul> 元素上：

ul {
  overflow: hidden;
}
ul li {
  position: relative;
  display: inline-block;
  text-align: center;
}
ul li a {
  display: block;
  padding: 10px 15px;
}
ul li.selected a {
  color: green;
}
.hor .selected:before, .hor .selected:after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 7px;
  width: 9999px;
  border-style: solid;
  border-width: 0px 4px 3px;
  border-color: blue;
}
.hor .selected:before {
  right: 50%;
  margin-right: -2px;
  transform-origin: 100% 0;
  transform: skewX(-45deg);
}
.hor .selected:after {
  left: 50%;
  margin-left: -2px;
  transform-origin: 0 0;
  transform: skewX(45deg);
}
ul.ver {
  width: 200px;
}
ul.ver li {
  display: block;
}
ul.ver li a {
  display: block;
  padding: 10px 15px;
}
.ver .selected:before, .ver .selected:after {
  content: '';
  position: absolute;
  right: 0;
  height: 9999px;
  width: 7px;
  border-style: solid;
  border-width: 4px 3px 4px 0;
  border-color: blue;
}
.ver .selected:before {
  bottom: 50%;
  margin-bottom: -2px;
  transform-origin: 0 100%;
  transform: skewY(-45deg);
}
.ver .selected:after {
  top: 50%;
  margin-top: -2px;
  transform-origin: 0 0;
  transform: skewY(45deg);
}
body {
  width: 90%;
  margin: 20px auto;
  background: rgb(229, 180, 230);
  background: -moz-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
  background: -webkit-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
  background: -o-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
  background: -ms-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
  background: linear-gradient(120deg, rgb(229, 180, 230) 30%, rgb(90, 140, 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>

Answer 4

我做了this:

ul li.selected a {
    color:green
}

ul.hor {
    border-bottom:3px solid blue
}

ul.ver {
    width:200px;
    border-right:3px solid blue;
}

ul li {
    display:inline-block;position:relative
}
ul li a {
    display:block;padding:10px 15px;
}

}

ul.ver {
    width:200px;border-right:3px solid blue
}
ul.ver li {
    display:block;
}
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, 180, 230) 30%, rgb(90, 140, 250) 70%);
background: -webkit-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
background: -o-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
background: -ms-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
background: linear-gradient(120deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);

}

.ver {
 position: relative;
}
.ver:after, .arrow_box:before {
    left: 177px;
    top: 95px;
 border: solid;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
}

.ver:after {
 border-color: rgba(136, 183, 213, 0);
 border-right-color: blue;
 border-width: 12px;
 margin-top: -12px;
}

.hor {
 position: fixed;
}

.hor:after, .hor:before {
 top: 20px;
 left: 194px;
 border: solid transparent;
 content: " ";
 height: 0;
 max-width: 0;
 position: absolute;
 pointer-events: none;
}

.hor:before {
 border-color: rgba(194, 225, 245, 0);
 border-bottom-color: blue;
 border-width: 10px;
 margin-left: -10px;
}

<ul class="hor">
  <div class="arrow_box-vertical">
    <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>
<br>
<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>

代码段看起来很糟糕，请查看 JSFiddle。

Answer 5

这个更容易定位并且有一个完美的三角形。我们仍在使用变换旋转但不需要变换倾斜。也不需要计算宽度。 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, 180, 230);
background: -moz-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
background: -webkit-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
background: -o-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
background: -ms-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
background: linear-gradient(120deg, rgb(229, 180, 230) 30%, rgb(90, 140, 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>

将纯 css 箭头设置为具有透明或图像背景的菜单？

Setting up pure css arrows to menu with transparent or image background?

html

css

css-shapes