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

概述我试图在我的SELECTED水平和垂直菜单链接中应用纯CSS箭头,但似乎无法弄清楚我想要的结果.在stackoverflow中有一些类似的解决方案,但它并不能解决我的问题. UL有一个边界,这是问题来自…但我不应该删除UL边界. FIDDLE HERE <li class="selected"><a href="#">Arrow please</a></li> ul.hor { border- 我试图在我的SELECTED水平和垂直菜单链接中应用纯CSS箭头,但似乎无法弄清楚我想要的结果.在stackoverflow中有一些类似的解决方案,但它并不能解决我的问题.

ul有一个边界,这是问题来自…但我不应该删除ul边界.

@L_502_0@

<li ><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 >  <li><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><br><ul >  <li><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>

解决方法 这一个更容易定位,并有一个完美的三角形.我们仍在使用变换旋转,但不需要变形偏移.也不需要计算宽度.
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 >	    <li><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><br>	<ul >	    <li ><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>

总结

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

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