CSS 是否可以使用 CSS3 制作尖头按钮（类似苹果）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6789943/
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
Is it possible to make pointy buttons (apple like) with CSS3?
提问by Mateus Pinheiro
回答by Aaron Mendez
This is one possible solution, using primarily CSS2 (with just a touch of optional CSS3 for border-radius and box-shadow). This is a limited, straightforward solution that seems to work in current versions (as of Nov 2012) of Chrome and Firefox, and likewise renders nearly identically in IE7-9. I don't have IE10 to test, but one can reasonably assume it is fine.
这是一种可能的解决方案，主要使用 CSS2（只需为 border-radius 和 box-shadow 添加一些可选的 CSS3）。这是一个有限的、直接的解决方案，似乎适用于 Chrome 和 Firefox 的当前版本（截至 2012 年 11 月），同样在 IE7-9 中呈现几乎相同。我没有要测试的 IE10，但可以合理地假设它很好。
I wrote "limited" because these buttons must use solid background-colors in order to render identically across browsers. Also, the box-shadow does not fully extend to the "point," but used sparingly it may not be objectionable. Box-shadow is optional anyway, since it is unsupported on old IE unless augmented with something like CSS3Pie.
我写了“有限”，因为这些按钮必须使用纯背景色才能在浏览器中呈现相同的效果。此外，box-shadow 并没有完全延伸到“点”，但谨慎使用它可能不会令人反感。Box-shadow 无论如何都是可选的，因为它在旧的 IE 上不受支持，除非增加了类似CSS3Pie 的东西。
.wiz-buttons > a {
position: relative;
display: block;
font: normal 14px Arial;
text-decoration: none;
cursor: pointer;
}
.wiz-buttons > a > .button {
min-width: 75px;
}
/* Next Button */
.wiz-buttons > .next {
color: #FFF;
}
.wiz-buttons > .next > .arrow-inner {
display: block;
position: absolute;
top: 1px;
right: 3px;
z-index: 2000;
width: 0;
height: 0;
border: 14px solid transparent;
border-left-color: #E38A13;
}
.wiz-buttons > .next > .arrow {
display: block;
float: right;
width: 0;
height: 0;
border: 15px solid transparent;
border-left-color: #CC790B;
}
.wiz-buttons > .next > .button {
display: block;
float: right;
line-height: 20px;
background-color: #E38A13;
border: 2px solid #CC790B;
border-right: 0;
padding: 3px 3px 3px 9px;
text-align: center;
-webkit-border-radius: 2px 0 0 2px;
-moz-border-radius: 2px 0 0 2px;
border-radius: 2px 0 0 2px;
filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.wiz-buttons > .next:hover > .arrow {
border-left-color: #ad6608;
}
.wiz-buttons > .next:hover > .arrow-inner {
border-left-color: #CC790B;
}
.wiz-buttons > .next:hover > .button {
background-color: #CC790B;
border-color: #b66c09;
}
/* Previous Button */
.wiz-buttons > .previous {
color: #666;
}
.wiz-buttons > .previous > .arrow-inner {
display: block;
position: absolute;
top: 1px;
left: 3px;
z-index: 2000;
width: 0;
height: 0;
border: 14px solid transparent;
border-right-color: #f4f4f4;
}
.wiz-buttons > .previous > .arrow {
display: block;
float: left;
width: 0;
height: 0;
border: 15px solid transparent;
border-right-color: #e8e8e8;
}
.wiz-buttons > .previous > .button {
display: block;
float: left;
line-height: 20px;
background-color: #f6f6f6;
border: 2px solid #eaeaea;
border-left: 0;
padding: 3px 9px 3px 3px;
text-align: center;
-webkit-border-radius: 0 2px 2px 0;
-moz-border-radius: 0 2px 2px 0;
border-radius: 0 2px 2px 0;
filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.wiz-buttons > .previous:hover > .arrow {
border-right-color: #e1e1e1;
}
.wiz-buttons > .previous:hover > .arrow-inner {
border-right-color: #eaeaea;
}
.wiz-buttons > .previous:hover > .button {
background-color: #eaeaea;
border-color: #e3e3e3;
}<div class="wiz-buttons">
<a class="previous" href="#">
<span class="arrow"></span>
<span class="arrow-inner"></span>
<span class="button">Previous</span>
</a>
<a class="next" href="#">
<span class="arrow"></span>
<span class="arrow-inner"></span>
<span class="button">Next</span>
</a>
</div>I hope someone finds this useful.
我希望有人觉得这很有用。
回答by jchook
Here is example output:
这是示例输出：
http://jsfiddle.net/stowball/XvFFX/
http://jsfiddle.net/stowball/XvFFX/
HTML
HTML
<h2>iOS style back buttons with CSS3</h2>
<div>
<a href="#"><span>Back</span></a>
</div>
CSS
CSS
div {
background: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 10px;
}
a {
background: #950006;
background: -moz-linear-gradient(top, #de0009 0%, #950006 100%);
background: -o-linear-gradient(top, #de0009 0%, #950006 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #de0009), color-stop(100%, #950006));
background: -webkit-linear-gradient(top, #de0009 0%, #950006 100%);
background: linear-gradient(top, #de0009 0%, #950006 100%);
border: solid #dd0009;
border-width: 1px 1px 1px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
display: inline-block;
height: 28px;
line-height: 28px;
margin-left: 20px;
margin-right: 2px;
padding: 0 7px 0 3px;
position: relative;
text-decoration: none;
}
a:before {
background: #950006;
background: -moz-linear-gradient(-45deg, #de0009 0%, #950006 100%);
background: -o-linear-gradient(-45deg, #de0009 0%, #950006 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #de0009), color-stop(100%, #950006));
background: -webkit-linear-gradient(-45deg, #de0009 0%, #950006 100%);
background: linear-gradient(-45deg, #de0009 0%, #950006 100%);
border: solid #dd0009;
border-width: 0 0 1px 1px;
border-radius: 2px 0 2px 2px;
content: '';
display: block;
height: 21px;
left: -11px;
position: absolute;
top: 3px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 21px;
}
a:hover, a:focus {
border-color: #b50007;
background: #7e0004;
background: -moz-linear-gradient(top, #b50007 0%, #7e0004 100%);
background: -o-linear-gradient(top, #b50007 0%, #7e0004 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b50007), color-stop(100%, #7e0004));
background: -webkit-linear-gradient(top, #b50007 0%, #7e0004 100%);
background: linear-gradient(top, #b50007 0%, #7e0004 100%);
}
a:hover:before, a:focus:before {
border-color: #b50007;
background: #7e0004;
background: -moz-linear-gradient(-45deg, #b50007 0%, #7e0004 100%);
background: -o-linear-gradient(-45deg, #b50007 0%, #7e0004 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #b50007), color-stop(100%, #7e0004));
background: -webkit-linear-gradient(-45deg, #b50007 0%, #7e0004 100%);
background: linear-gradient(-45deg, #b50007 0%, #7e0004 100%);
}
a span {
color: #fff;
font-weight: bold;
position: relative;
}
回答by Bazzz
Maybe you can do this making a CSS arrow
也许你可以做一个CSS 箭头
Here is an example: http://jsfiddle.net/t5C4p/
这是一个例子：http: //jsfiddle.net/t5C4p/
HTML
HTML
<a href="#">
<span class="arrow"></span>
<span class="button">button</span>
</a>
CSS
CSS
.arrow {
display: block;
float: left;
width: 0;
height: 0;
border: 15px solid transparent;
border-right-color: #000;
}
.button {
display: block;
float: left;
line-height: 20px;
border: 2px solid #000;
padding: 3px;
}
回答by Bazzz
Here's a fiddle I made with a "skew" (to make the arrow part slimmer) and a pointy tip, to make it even more iOS like:
这是我用“倾斜”（使箭头部分更薄）和尖尖的尖端制作的小提琴，使其更像 iOS：
(Removed jsfiddle link due to new guidelines)
（由于新指南删除了 jsfiddle 链接）
Update
更新
A Blogpost about creating iOS5 or iOS6 style arrow buttons
关于创建 iOS5 或 iOS6 样式箭头按钮的博客文章
回答by Ali Ben Messaoud
Try this : http://jsfiddle.net/stowball/XvFFX/
