沃梦达 / 编程问答 / 前端问题 / 正文

带渐变的css三角形

沃梦达教程前端问题

2022-01-01

CSS triangle with gradient(带渐变的css三角形)

本文介绍了带渐变的css三角形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试实现一个用渐变填充的三角形。三角形应位于页面的左上角，并拉伸50%的水平视区和120%的垂直视区。

我需要三角形有一个渐变穿过它。
我已经成功地完成了前三件事，但我无法使渐变起作用。
我试过用overflow和transform: rotate();用不同的方式定位伪元素，但我就是不能让它起作用。

以下是我到目前为止的JSfiddle：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0px 0 120vh 50vw;
  border-color: transparent transparent transparent green;
}

<div class="triangle"></div>

推荐答案

要保持所需的比例，可以将inline SVG与preserveAspectRatio="none"属性(see MDN)一起使用。这样，宽度和高度将固定为您使用的视区单位。
您可以使用polygon element创建三角形，使用linearGradient element用渐变填充三角形：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

svg {
  width: 50vw;
  height: 120vh;
}

<svg viewBox="0 0 10 10" preserveAspectRatio="none">
  <defs>
    <linearGradient id="gradient">
      <stop offset="5%" stop-color="darkorange" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>
  <polygon fill="url(#gradient)" points="0 0 10 0 0 10" />
</svg>

这篇关于带渐变的css三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

本文标题为：带渐变的css三角形