创建一个带有直角三角形/指针的按钮 [英] Create a Button with right triangle/pointer
本文介绍了创建一个带有直角三角形/指针的按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
希望创建此操作:
什么是最好的方式来实现呢?
它必须:
我绝对希望文本保持文本(因此不使用图像)。另外,我想这是可重用的,所以我可以把不同的文字。
理想情况下,箭头部分应该与文本一样高。
很高兴:
如果它是ie8 +
谢谢!!
p>解决方案
您尝试过使用html / css吗?
#vert_menu {overflow:hidden; width:100%; } #vert_menu li {float:left; } #vert_menu a {padding:8px 20px 8px 40px; float:left; text-align:center; text-decoration:none; font:normal 16px Myriad Pro,Helvetica,Arial,sans-serif; text-shadow:0px 1px 0px#000;颜色:#e6e2cf;位置:相对; text-shadow:1px 0 0#000;背景:#525252; min-width:181px; width:auto} #vert_menu a :: after,#vert_menu a :: before {content:; position:absolute; top:50%; margin-top:-19px; border-top:19px solid transparent; border-bottom:19px solid transparent; border-left:1em solid; right:-1em;}#vert_menu a :: after {z-index:2; border-left-color:#525252; }
< ul id =vert_menu> ; li>< a href =#class =current>测试< / a>< / li>< / ul>
>
Looking to create this:
What would be the best way to achieve it?
IT MUST: I'd definitely like to keep the text as text (so not using an image). Also I'd like this to be re-usable so that I can put different text in it. Ideally the arrow part should be as high as the text.
NICE TO HAVES: I'd like to be able to drop this on any background (so it isn't always on white) Would be great if it was ie8+
Thanks!!
解决方案
Have you tried something using html/css??
#vert_menu{ overflow: hidden; width: 100%; }
#vert_menu li{ float: left; }
#vert_menu a{
padding: 8px 20px 8px 40px;
float: left; text-align:center;
text-decoration: none; font: normal 16px Myriad Pro, Helvetica, Arial, sans-serif; text-shadow:0px 1px 0px #000;
color: #e6e2cf;
position: relative; text-shadow:1px 0 0 #000;
background: #525252; min-width:181px; width:auto
}
#vert_menu a::after,
#vert_menu a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -19px;
border-top: 19px solid transparent;
border-bottom: 19px solid transparent;
border-left: 1em solid;
right: -1em;
}
#vert_menu a::after{ z-index: 2; border-left-color: #525252; }
<ul id="vert_menu">
<li><a href="#" class="current">test</a></li>
</ul>
这篇关于创建一个带有直角三角形/指针的按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文