html - CSS中的分层金字塔没有剪辑路径

问题描述

我正在创建一个带有金字塔的结果页面。这个金字塔由多层组成（下图）。我用这个属性创建了它：

clip-path: polygon(50% 0, 100% 100%, 0 100%);

它看起来像这样：

实际金字塔

用户可以将结果页面导出为 PDF。我面临的问题是似乎不支持剪辑路径。pdf上的结果是这样的：

PDF上的金字塔

这意味着我必须在没有剪辑路径的情况下创建相同的金字塔，但我真的不知道该怎么做。有谁知道如何实现这一目标？

标签： htmlcss

因为您说的是“创建结果页面”，所以我假设金字塔中的水平线可以“填充”红色，具体取决于结果。

我建议使用内联 SVG，然后使用不同的样式属性为每一行着色。

但是，我需要练习线性梯度，所以我给你这个答案。您可以随时为每一行分配不同的值。

前两行只是对角覆盖行以创建金字塔形状。

--pyramid-size如果要缩放金字塔，请进行更改。

.pyramid {
  --pyramid-size: 160px;

  --first-color:  #f95656;
  --second-color: #e2e5e5;
  --third-color:  #e2e5e5;
  --fourth-color: #e2e5e5;
  --fifth-color:  #e2e5e5;
  
  --cover-size: 66%;
  
  width: var(--pyramid-size);
  height: calc(var(--pyramid-size) * 130 / 160);

  background: 
    linear-gradient(58deg,  transparent var(--cover-size), white var(--cover-size)),
    linear-gradient(-58deg, transparent var(--cover-size), white var(--cover-size)),

    linear-gradient(180deg,  var(--first-color)  19%,
    rgb(255,255,255)    19%, rgb(255,255,255)    21%,
    var(--second-color) 21%, var(--second-color) 39%,
    rgb(255,255,255)    39%, rgba(255,255,255)   41%,
    var(--third-color)  41%, var(--third-color)  59%,
    rgb(255,255,255)    59%, rgba(255,255,255)   61%,
    var(--fourth-color) 61%, var(--fourth-color) 79%,
    rgb(255,255,255)    79%, rgb(255,255,255)    81%,
    var(--fifth-color)  81%);
}

<div class="pyramid"></div>

html - CSS中的分层金字塔没有剪辑路径

问题描述

解决方案

推荐阅读