时间戳

首页 > 解决方案 > 将 JSX 元素渲染为多级金字塔

javascript - 将 JSX 元素渲染为多级金字塔

问题描述

我需要创建一个具有 4 级划分的金字塔图形，如下所示： 在此处输入图像描述

尽管我使用以下代码集实现了相同的效果：

const PyramidChart = () => {
  return (
    <div className="d-flex flex-column align-items-center pyramid_wrap">
      <div className="category_one">
        <h6>2</h6>
      </div>
      <div className="category_two">
        <h6>8</h6>
      </div>
      <div className="category_three">
        <h6>11</h6>
      </div>
      <div className="category_four">
        <h6>16</h6>
      </div>
    </div>
  );
};

ReactDOM.render(
  <PyramidChart />,
  document.getElementById('root')
);
.pyramid_wrap {
  height: 100%;
  text-align: center;
}

.category_one {
  width: 70px;
  height: 30px;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-bottom: 50px solid tomato;
}

.category_two {
  width: 116px;
  height: 30px;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-bottom: 28px solid orange;
}

.category_three {
  width: 162px;
  height: 30px;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-bottom: 28px solid cyan;
}

.category_four {
  width: 208px;
  height: 30px;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-bottom: 28px solid teal;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>


<div id="root"></div>

得到了这样的东西：

在此处输入图像描述

但我无法解决的问题是将顶层金字塔区域中的文本对齐到中心。它总是与它对齐的不同步。

感谢您对纠正此问题的任何帮助:)

标签： javascripthtmlcssreactjs

解决方案

让我们尝试从 CSS Triangle 移动到:before并:after使用skewtransform 属性。

我没有更改您的 HTML，只需.value向您添加一个类来<h6>设置它们的样式。

基本上你所要做的就是为每个<div>a设置:before负度角和:aftera 正度角，并给它们相同的背景颜色，以便匹配。

我只在顶层<div>使用了 CSS 三角形，所以你已经知道它是如何工作的。

为了使值水平和垂直对齐，我在父级上使用了 flexbox，并结合了justify-content: center;（水平对齐）和align-items: center;（垂直对齐）。不要忘记始终line-height:1em;为要垂直对齐的元素添加和删除边距。如果line-height不等于它的实际高度，它将总是在中间轴上或下一些像素。

.pyramid_wrap {
  margin-top: 200px;
  height: 100%;
  text-align: center;
}

.category_one,
.category_two,
.category_three,
.category_four {
  position: relative;
  margin: 6px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.category_one:before,
.category_one:after,
.category_two:before,
.category_two:after,
.category_three:before,
.category_three:after,
.category_four:before,
.category_four:after {
  position: absolute;
  top: 0;
  display: block;
  width: 30px;
  height: 100%;
  content: "";
}

.category_one:before,
.category_two:before,
.category_three:before,
.category_four:before {
  left: -15px;
  transform: skew(-25deg);
}

.category_one:after,
.category_two:after,
.category_three:after,
.category_four:after {
  right: -15px;
  transform: skew(25deg);
}

.category_one {
    width: 20px;
    height: 40px;
    background: tomato;

}

.category_one:before,
.category_one:after {
  width: 30px;
  height: 40px;
  background: tomato;
}

.category_one:before {
  left: -16px;
  top: 0;
}
.category_one:after {
  right: -16px;
  top: 0;
}

.category_one .value:after {
  position: absolute;
  z-index: -1;
  top: -55px;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 28px 70px 28px;
  border-color: transparent transparent tomato transparent;
}


.category_two {
    width: 70px;
    height: 40px;
    background: orange;
}

.category_two:before,
.category_two:after {
  width: 40px;
  background: orange;
}

.category_two:before {
  left: -12px;
}
.category_two:after {
  right: -12px;
}


.category_three {
  width: 120px;
  height: 40px;
  background: cyan;
}

.category_three:before,
.category_three:after {
  background: cyan;
}
.category_three:before {
  left: -9px;
}
.category_three:after {
  right: -9px;
}


.category_four {
    width: 150px;
    height: 40px;
    background: teal;
}

.category_four:before,
.category_four:after {
  background: teal;
}

.value {
  margin: 0;
  position: relative;
  z-index: 3;
  color: #fff;
  font-size: 16px;
  font-family: Arial, sans-serif;
  font-weight: normal;
  line-height: 1em;
}
 <div class="d-flex flex-column align-items-center pyramid_wrap">
        <div class="category_one">
            <h6 class="value">2</h6>
        </div>
        <div class="category_two">
          <h6 class="value">8</h6>
        </div>
        <div class="category_three">
          <h6 class="value">11</h6>
        </div>
        <div class="category_four">
          <h6 class="value">16</h6>
        </div>
      </div>

推荐阅读