使CSS3三角形具有线性渐变

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

回答：

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

以上是 使CSS3三角形具有线性渐变 的全部内容， 来源链接： utcz.com/qa/435502.html

回到顶部