短網址

發表留言

源碼分享

人氣 116°c

CSS金字塔Pyramid

純 CSS 製作分層金字塔，CSS Pyramid or CSS Pyramidal Grid 畫出直立金字塔，倒轉金字塔以及上下正反金字塔，內容也有如何改變圖表的大小、顏色以及金字塔中的步驟。

想要製作不同階層的圖形，需要使用 Transform 標籤，能夠實現將不同的物件及框架，向水平方向反轉或垂直方向反轉。

水平反轉（左右翻轉）
transform: translateX(-1);

垂直反轉（上下翻轉）
transform: translateY(-1);

水平反轉（左右翻轉）
transform: scaleX(-1);

垂直反轉（上下翻轉）
transform: scaleY(-1);

CSS 分層金字塔:

01. 立式金字塔

CSS:

.pyramid-1a {
  width: 200px;
  display: flex;
  flex-direction: column;
  height: 180px;
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.pyramid__section {
  flex: 1 1 100%;
  background-color: green;
  margin-bottom: 2px;
}

.pyramid__section:nth-of-type(even) {
  background-color: lightgray;
}

.pyramid__section:hover {
  background-color: yellow;
}

Html:

<div class="pyramid-1a">
  <div class="pyramid__section"></div>
  <div class="pyramid__section"></div>
  <div class="pyramid__section"></div>
  <div class="pyramid__section"></div>
</div>

02. 倒轉金字塔

CSS:

.pyramid-1b {
  width: 200px;
  display: flex;
  flex-direction: column;
  height: 180px;
  transform: scaleY(-1);
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.pyramid__section {
  flex: 1 1 100%;
  background-color: green;
  margin-bottom: 2px;
}

.pyramid__section:nth-of-type(even) {
  background-color: lightgray;
}

.pyramid__section:hover {
  background-color: yellow;
}

Html:

<div class="pyramid-1b">
  <div class="pyramid__section"></div>
  <div class="pyramid__section"></div>
  <div class="pyramid__section"></div>
  <div class="pyramid__section"></div>
</div>

03. 正反金字塔

CSS:

.inverted-pyramid-1a {
  width: 200px;
  display: flex;
  flex-direction: column;
  height: 180px;
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.inverted-pyramid-1b {
  width: 200px;
  display: flex;
  flex-direction: column;
  height: 180px;
  transform: scaleY(-1);
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.pyramid__section_s {
  flex: 1 1 100%;
  background-color: green;
  /* margin-bottom: 2px; 中間空隙 */
}

.pyramid__section_s:nth-of-type(even) {
  background-color: lightgray;
}

.pyramid__section_s:hover {
  background-color: yellow;
}

Html:

<div class="inverted-pyramid-1a">
  <div class="pyramid__section_s"></div>
  <div class="pyramid__section_s"></div>
  <div class="pyramid__section_s"></div>
  <div class="pyramid__section_s"></div>
</div>
<div class="inverted-pyramid-1b">
  <div class="pyramid__section_s"></div>
  <div class="pyramid__section_s"></div>
  <div class="pyramid__section_s"></div>
  <div class="pyramid__section_s"></div>
</div>

04. 立式金字塔 (文字+多彩)

CSS:

.pyramid-2a {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  width: 100vmin;
  aspect-ratio: 2 / 1;
  background-color: gray;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1vmin;
  color: white;
  text-align: center;
}

/* EDIT Use grid to vertically center text */
.pyramid-2a div {
  display: grid;
  align-items: center;
}

.one {
  background-color: #EA1B07;
}

.two {
  background-color: #F4B600;
}

.three {
  background-color: #F9E029
}

.four {
  background-color: #049DFC
}

.five {
  background-color: #A77643;
}

.six {
  background-color: #5CD533;
}

Html:

<div class="pyramid-2a">
  <div class="one">Hello</div>
  <div class="two">World</div>
  <div class="three">Foo</div>
  <div class="four">Bar</div>
  <div class="five">Baz</div>
  <div class="six">Qux</div>
</div>

05. 倒轉金字塔 (文字+多彩)

CSS:

.pyramid-2b {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  width: 100vmin;
  aspect-ratio: 2 / 1;
  background-color: gray;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1vmin;
  color: white;
  text-align: center;
  transform: scaleY(-1);
}

/* EDIT Use grid to vertically center text */
.pyramid-2b div {
  display: grid;
  align-items: center;
  transform: scaleY(-1);
}

.one {
  background-color: #EA1B07;
}

.two {
  background-color: #F4B600;
}

.three {
  background-color: #F9E029
}

.four {
  background-color: #049DFC
}

.five {
  background-color: #A77643;
}

.six {
  background-color: #5CD533;
}

Html:

<div class="pyramid-2b">
  <div class="one">Hello</div>
  <div class="two">World</div>
  <div class="three">Foo</div>
  <div class="four">Bar</div>
  <div class="five">Baz</div>
  <div class="six">Qux</div>
</div>

06. 正反金字塔 (文字+多彩)

CSS:

.inverted-pyramid-2a {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  width: 100vmin;
  aspect-ratio: 2 / 1;
  background-color: gray;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1vmin;
  color: white;
  text-align: center;
}

/* EDIT Use grid to vertically center text */
.inverted-pyramid-2a div {
  display: grid;
  align-items: center;
}

.inverted-pyramid-2b {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  width: 100vmin;
  aspect-ratio: 2 / 1;
  background-color: gray;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1vmin;
  color: white;
  text-align: center;
  transform: scaleY(-1);
}

/* EDIT Use grid to vertically center text */
.inverted-pyramid-2b div {
  display: grid;
  align-items: center;
  transform: scaleY(-1);
}

.one {
  background-color: #EA1B07;
}

.two {
  background-color: #F4B600;
}

.three {
  background-color: #F9E029
}

.four {
  background-color: #049DFC
}

.five {
  background-color: #A77643;
}

.six {
  background-color: #5CD533;
}

Html:

<div class="inverted-pyramid-2a">
  <div class="one">先生</div>
  <div class="two">小姐</div>
  <div class="three">學生</div>
  <div class="four">男女</div>
  <div class="five">貓狗</div>
  <div class="six">鳥兒</div>
</div>
<div class="inverted-pyramid-2b">
  <div class="one">先生</div>
  <div class="two">小姐</div>
  <div class="three">學生</div>
  <div class="four">男女</div>
  <div class="five">貓狗</div>
  <div class="six">鳥兒</div>
</div>

07. 立式金字塔 (ul+ol+li)

CSS:

.pyramid-3a {
    position: relative;
    padding: 0px;
    margin: 0px auto;
    width: calc(8em * 5);
    list-style: none;
    font-size: 1.4vw;
}
.pyramid-3a > li {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6em;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
}
.pyramid-3a > li + li {
    border-top: 2px solid #fff;
}
.pyramid-3a > li::before {
    position: absolute;
    top: 0px;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    background-position: top -2px left 1px, top -2px right 1px;
    background-size: 50% calc(6em * 5);
    background-repeat: no-repeat;
    content: "";
}
.pyramid-3a > li:nth-of-type(1)::before {
    z-index: -1;
    height: calc(6em * 1);
    background-image:
        linear-gradient(to bottom right, transparent 50%, #85b8ea 50%),
        linear-gradient(to bottom left, transparent 50%, #85b8ea 50%);
}
.pyramid-3a > li:nth-of-type(2)::before {
    z-index: -2;
    height: calc(6em * 2);
    background-image:
        linear-gradient(to bottom right, transparent 50%, #73ade7 50%),
        linear-gradient(to bottom left, transparent 50%, #73ade7 50%);
}
.pyramid-3a > li:nth-of-type(3)::before {
    z-index: -3;
    height: calc(6em * 3);
    background-image:
        linear-gradient(to bottom right, transparent 50%, #62a3e4 50%),
        linear-gradient(to bottom left, transparent 50%, #62a3e4 50%);
}
.pyramid-3a > li:nth-of-type(4)::before {
    z-index: -4;
    height: calc(6em * 4);
    background-image:
        linear-gradient(to bottom right, transparent 50%, #5199e1 50%),
        linear-gradient(to bottom left, transparent 50%, #5199e1 50%);
}
.pyramid-3a > li:nth-of-type(5)::before {
    z-index: -5;
    height: calc(6em * 5);
    background-image:
        linear-gradient(to bottom right, transparent 50%, #3388dd 50%),
        linear-gradient(to bottom left, transparent 50%, #3388dd 50%);
}

Html:

<ol class="pyramid-3a">
    <li>王</li>
    <li>王直属護衛軍</li>
    <li>師団長</li>
    <li>兵隊長</li>
    <li>戦闘兵</li>
</ol>

08. 倒轉金字塔 (ul+ol+li)

CSS:

.pyramid-3b {
    position: relative;
    padding: 0px;
    margin: 0px auto;
    width: calc(8em * 5);
    list-style: none;
    font-size: 1.4vw;
}
.pyramid-3b > li {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6em;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
}
.pyramid-3b > li + li {
    border-top: 2px solid #fff;
}
.pyramid-3b > li::before {
    position: absolute;
    top: 0px;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    background-position: top 2px right 1px, top 2px left 1px;
    background-size: 50% calc(6em * 5);
    background-repeat: no-repeat;
    content: "";
}
.pyramid-3b > li:nth-of-type(1)::before {
    z-index: -1;
    height: calc(6em * 1);
    background-image:
        linear-gradient(to bottom right, #3388dd 50%, transparent 50%),
        linear-gradient(to bottom left, #3388dd 50%, transparent 50%);
}
.pyramid-3b > li:nth-of-type(2)::before {
    z-index: -2;
    height: calc(6em * 2);
    background-image:
        linear-gradient(to bottom right, #5199e1 50%, transparent 50%),
        linear-gradient(to bottom left, #5199e1 50%, transparent 50%);
}
.pyramid-3b > li:nth-of-type(3)::before {
    z-index: -3;
    height: calc(6em * 3);
    background-image:
        linear-gradient(to bottom right, #62a3e4 50%, transparent 50%),
        linear-gradient(to bottom left, #62a3e4 50%, transparent 50%);
}
.pyramid-3b > li:nth-of-type(4)::before {
    z-index: -4;
    height: calc(6em * 4);
    background-image:
        linear-gradient(to bottom right, #73ade7 50%, transparent 50%),
        linear-gradient(to bottom left, #73ade7 50%, transparent 50%);
}
.pyramid-3b > li:nth-of-type(5)::before {
    z-index: -5;
    height: calc(6em * 5);
    background-image:
        linear-gradient(to bottom right, #85b8ea 50%, transparent 50%),
        linear-gradient(to bottom left, #85b8ea 50%, transparent 50%);
}

Html:

<ol class="pyramid-3b">
    <li>王</li>
    <li>王直属護衛軍</li>
    <li>師団長</li>
    <li>兵隊長</li>
    <li>戦闘兵</li>
</ol>

演示：ifreesite.com/hawkins

代碼測試︰ ifreesite.com/runcode.htm

圖片預覧：

放大圖片：按此>>

技術文檔：

01. Pyramid with text in HTML/CSS

02. CSS Pyramid

03. ピラミッド型の階層図をCSSだけで描きたい

相關文章：
01. CSS將圖片文字任何物件反轉

標籤：CSS 日期：5 月, 2026

文章短址：

月光部落

CSS金字塔Pyramid

作者︰JACK