How to write a generic CSS for consecutive overlapping triangles?

Question

For example, having those html tags:

.triangle-one {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 100px solid rgb(20, 97, 27);
  margin-top: -69px;
}

.triangle-two {
  width: 0;
  height: 0;
  border-left: 90px solid transparent;
  border-right: 90px solid transparent;
  border-bottom: 150px solid rgb(20, 97, 27);
  margin-top: -40px;
}

.triangle-three {
  width: 0;
  height: 0;
  border-left: 120px solid transparent;
  border-right: 120px solid transparent;
  border-bottom: 200px solid rgb(20, 97, 27);
  margin-top: -80px;
}

.triangle-four {
  width: 0;
  height: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 250px solid rgb(20, 97, 27);
  margin-top: -120px;
}

div {
  margin:auto;
}

<div class="triangle-one"></div>
<div class="triangle-two"></div>
<div class="triangle-three"></div>
<div class="triangle-four"></div>

The values of border-left, border-right, border-bottom and margin-top are proportional.

It starts from triangle-one with some values and those values are multiplied on each step by 1.5.

Is there a way to write a formula for this?

You could probably use CSS Variables but you can't really reduce the number of lines you have unless you use a CSS preprocessor like Sass, which would have to compile to CSS ultimately, anyway. — TylerH
– TylerH, Commented Dec 29, 2020 at 15:21

Temani Afif · Accepted Answer · 2020-12-29 21:50:11Z

Forget the old border-way to create triangles. Do it differently and you won't need any complex formula:

.triangle {
  --b:50px;
  --m:-8%;
  
  display:inline-block;
}

.triangle > div {
  width:calc(var(--n)*var(--b));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: rgb(20, 97, 27);
  margin: auto;
}

.triangle > div::before {
  content: "";
  display: block;
  padding-top: 86%;
  margin-top: calc(var(--n)*var(--m));
}

.triangle > div:nth-child(1) {--n:1}
.triangle > div:nth-child(2) {--n:2}
.triangle > div:nth-child(3) {--n:3}
.triangle > div:nth-child(4) {--n:4}
.triangle > div:nth-child(5) {--n:5}
/*.triangle > div:nth-child(N) {width:calc(N*var(--b));}*/

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

<div class="triangle" style="--b:20px;--m:-11%;">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="triangle" style="--b:80px;--m:-5%;">
  <div></div>
  <div></div>
  <div></div>
</div>

Collectives™ on Stack Overflow

How to write a generic CSS for consecutive overlapping triangles?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related