html – 使用透明或图像背景设置纯CSS的箭头到菜单？

<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.

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>

@H_944_12@ @H_944_12@

大佬总结

以上是大佬教程为你收集整理的html – 使用透明或图像背景设置纯CSS的箭头到菜单？全部内容，希望文章能够帮你解决html – 使用透明或图像背景设置纯CSS的箭头到菜单？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。