使用线性渐变制作 CSS3 三角形答案

【问题标题】：Make CSS3 triangle with linear gradient使用线性渐变制作 CSS3 三角形
【发布时间】：2012-05-21 18:06:00
【问题描述】：

我需要在一侧创建带有三角形的按钮（例如 http://css-tricks.com/triangle-breadcrumbs/），带有线性垂直渐变和边框，我想使用纯CSS3。如果我需要45度的“三角形”也没关系，我就是这样写的

.button:after {
    -webkit-transform: rotate(45deg);
    background: -webkit-linear-gradient(-45deg, #fff, #000);
    content: '';
    width: 2em;
    height: 2em;
    display: block;
}

并将该伪元素的一半隐藏在 .button 下（因此只有另一半可见，如三角形）。

但如果我需要另一个角度（例如更陡峭） - 我无法使用标准 XY 旋转和缩放。我可以使用例如2个div，一个用于三角形的上半部分，一个用于底部，但边框和渐变可能有问题。

也许可以使用带有色标的多个渐变来做到这一点？

【问题讨论】：

标签： css css-transforms css-shapes

【解决方案1】：

所以我知道你想用 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>

你可以这样嵌入：

<img src="triangle.svg" alt="Triangle" class="triangle" />

你也可以用同样的方法制作切换图像，并使用 JavaScript 或 jQuery 切换它：

$(".triangle").click(function()
{
    if($(this).attr("src") == "triangle.svg")
        $(this).attr("src", "triangledown.svg");

    else $(this).attr("src", "triangle.svg");
});

【讨论】：

我了解 SVG，但我仍然想知道是否还有其他方式 (CSS)
我对使用 CSS 的唯一担心是border-image 属性与IE9 不兼容。

【解决方案2】：

是的，它可以只使用 CSS 渐变来完成。您只需将三个渐变放在另一个之上（请记住，您列出的第一个是顶部的一个）。底部的一个（列出的最后一个）是您的垂直渐变。最重要的是，您有两个渐变，它们也使用了色标。

类似这样的：

background: linear-gradient(30deg, transparent 37%, #fff 37%), 
            linear-gradient(-30deg, transparent 37%, #fff 37%), 
            linear-gradient(to bottom, #ccc, #000);

我做了一个小演示，可以在以下位置看到：http://dabblet.com/gist/2705739

【讨论】：

【解决方案3】：

我希望这会对你有所帮助，我用纯 CSS 制作了一个只有一个 div 的渐变三角形。

http://jsfiddle.net/NDJ3S/15/

更新

现在检查它的工作原理：- http://jsfiddle.net/NDJ3S/17/

【讨论】：

【解决方案4】：

只需将clip-path 与background-image 一起使用

 .triangle {
    background-image: linear-gradient(rgba(#999, 0.4), rgba(#ccc, 0.5));
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    width: 100px;
    height: 100px;
 }

【讨论】：

【解决方案5】：

你检查过 css 变换 scaleY 吗？使用箭头周围的另一个元素（或者可能使用伪元素），它可以让您重新调整结果。

transform: scaleY(0.5)

例子：

http://jsfiddle.net/xaddict/hJyrU/（仅 webkit 示例）

编辑：添加 translateZ(0) 以强制在 webkit 中进行 GPU 渲染（消除锯齿边框，嗯！）

【讨论】：