CSS 创建一个带有直角三角形/指针的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12071972/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create a Button with right triangle/pointer
提问by user1010892
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 HAVE: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+
很高兴拥有：我希望能够将它放在任何背景上（所以它并不总是白色）如果它是 ie8+ 会很棒
Thanks!!
谢谢！！
回答by Sowmya
Have you tried something using html/css??
你有没有尝试过使用 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>回答by blasteralfred Ψ
You may this in your HTML;
你可以在你的 HTML 中使用它；
<div>
<a href="#"><button>Button</button></a>
</div>
And this in your CSS
这在你的 CSS 中
a {
background: #950006;
border: none;
display: inline-block;
height: 28px;
line-height: 28px;
position: relative;
text-decoration: none;
width: 100px
}
a:before{
background: #950006;
border: none;
content: '';
display: block;
height: 20px;
left: 90px;
position: absolute;
top: 4px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 21px;
}
a button {
color: #fff;
background: none;
border: none;
font-weight: bold;
position: relative;
width: 120px;
height: 28px;
}
and will output a button like this:-
并会输出一个这样的按钮：-
Hereis a working Live Demo. The complete button is CLICKABLE. You may test the button by changing the background of the parent div.
这是一个有效的现场演示。完整的按钮是可点击的。您可以通过更改父 div 的背景来测试按钮。
Hope this helps.
希望这可以帮助。
