使用 SCSS 實作「漸層金字塔」樣式

CSS
, ,

實作

新增 index.html 檔。

1
2
3
4
5
6
7
<div class="levels">
  <div class="level level-1"></div>
  <div class="level level-2"></div>
  <div class="level level-3"></div>
  <div class="level level-4"></div>
  <div class="level level-5"></div>
</div>

新增 style.scss 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@mixin level-style($bottom, $offset) {
  $rate: ($bottom - $offset) / $bottom * 100%;
  $x1: calc((100% - #{$rate}) / 2);
  $x2: calc((100% + #{$rate}) / 2);
  width: $bottom;
  clip-path: polygon($x1 0, $x2 0, 100% 100%, 0 100%);
}

.levels {
  display: flex;
  flex-direction: column;
  align-items: center;
  .level {
    height: 80px;
    background: linear-gradient(to bottom, red 0%, blue 100%); 
    @for $i from 1 through 5 {
      &.level-#{$i} {
        $offset: 80px;
        $bottom: $i * $offset;
        @include level-style($bottom, $offset);
      }
    }
  }
}

程式碼