使CSS3三角形具有线性渐变

小编典典

使CSS3三角形具有线性渐变

css

我需要创建一个侧面带有三角形的按钮（例如 **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格，一个用于三角形的上半部，一个用于底部，但是边界和渐变可能存在问题。

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

阅读 1916

2020-05-16

小编典典

我希望这对您有帮助，我仅用纯CSS将div做成了一个三角形。

2020-05-16

小编典典

所以我知道您想使用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");
});

2020-05-23

使CSS3三角形具有线性渐变

共2个答案