CSS 用线性渐变制作 CSS3 三角形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10580226/
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
Make CSS3 triangle with linear gradient
提问by Wayne
I need to create button with triangle on one side (like this http://css-tricks.com/triangle-breadcrumbs/) with linear vertical gradient and border, and I want to use pure CSS3. It's ok if I need 45deg "triangle", I just write smth like this
我需要在一侧创建带有三角形的按钮（例如http://css-tricks.com/triangle-breadcrumbs/），具有线性垂直渐变和边框，并且我想使用纯 CSS3。如果我需要 45deg 的“三角形”也可以，我只是这样写
.button:after {
-webkit-transform: rotate(45deg);
background: -webkit-linear-gradient(-45deg, #fff, #000);
content: '';
width: 2em;
height: 2em;
display: block;
}
and hide half of that pseudo-element under .button (so only another half of it is visible, like a triangle).
并将该伪元素的一半隐藏在 .button 下（因此只有另一半可见，就像一个三角形）。
But if I need another angle (e.g. more steep) - I can't make it with standart XY rotate and scale. I can use e.g. 2 divs, one for top half of triangle and one for bottom, but there might be a problem with border and gradient.
但是如果我需要另一个角度（例如更陡峭） - 我无法使用标准的 XY 旋转和缩放来实现。我可以使用例如 2 个 div，一个用于三角形的上半部分，一个用于底部，但边框和渐变可能存在问题。
Maybe it's possible to do that with multiple gradients with color stops?
也许可以用带有色标的多个渐变来做到这一点？
采纳答案by Shailender Arora
I hope this will help you i have made gradient triangle with only one div with pure css.
我希望这会帮助你我用纯 css 制作了只有一个 div 的渐变三角形。
UPDATED
更新
Check it now its working :- http://jsfiddle.net/NDJ3S/17/
现在检查它的工作：- http://jsfiddle.net/NDJ3S/17/
回答by James Wright
So I know that you want to do this with CSS, but I always do this in SVG:
所以我知道你想用 CSS 来做到这一点，但我总是在 SVG 中做到这一点：
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="fill" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(224,224,224);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(153,153,153);stop-opacity:1"/>
</linearGradient>
</defs>
<path d="M 0 0 L 64 0 L 32 64 z" stroke="colourname" fill="url(#fill)"/>
</svg>
You can embed it as so:
您可以将其嵌入如下：
<img src="triangle.svg" alt="Triangle" class="triangle" />
You could also make the toggle image in the same way, and toggle it using JavaScript or jQuery:
你也可以用同样的方式制作切换图像，并使用 JavaScript 或 jQuery 切换它：
$(".triangle").click(function()
{
if($(this).attr("src") == "triangle.svg")
$(this).attr("src", "triangledown.svg");
else $(this).attr("src", "triangle.svg");
});
回答by Ana
Yes, it can be done using only CSS gradients. You just have to put three gradients on top of the other (keep in mind that the first one you list is the one on top). The one at the bottom (last one listed) is your vertical gradient. On top of it, you have two gradients which also make use of color stops.
是的，它可以只使用 CSS 渐变来完成。您只需将三个渐变放在另一个之上（请记住，您列出的第一个渐变是最上面的那个）。底部的（列出的最后一个）是您的垂直渐变。最重要的是，您有两个渐变，它们也使用了色标。
Something like this:
像这样的东西：
background: linear-gradient(30deg, transparent 37%, #fff 37%),
linear-gradient(-30deg, transparent 37%, #fff 37%),
linear-gradient(to bottom, #ccc, #000);
I've made a little demo that can be seen at: http://dabblet.com/gist/2705739
我做了一个小演示，可以在以下位置看到：http: //dabblet.com/gist/2705739
回答by xaddict
Have you checked the css transform scaleY? With another element around the arrow (or perhaps with a pseudo element) it enables you to rescale the result.
你检查过 css 变换 scaleY 吗？使用箭头周围的另一个元素（或者可能使用伪元素），它使您能够重新缩放结果。
transform: scaleY(0.5)
Example:
例子：
http://jsfiddle.net/xaddict/hJyrU/(webkit-only example)
http://jsfiddle.net/xaccident/hJyrU/（仅 webkit 示例）
EDIT: added translateZ(0)to force GPU rendering in webkit (anti-aliased borders, mhmmmm!)
编辑：添加translateZ(0)以强制在 webkit 中进行 GPU 渲染（抗锯齿边框，嗯！）
