Is there a better way to realize this effect?

HTML-CSS
1

I am trying to imitate the same effect of the “roof” in this example.

Lab example image
Lab example image1124×1041 28.2 KB

This is my thought:

HTML:

    <div id="roof">
      <!--<div class="linear-left-top-to-bottom-right"></div>
        <div class="linear-left-bottom-to-top-right"></div>-->
      <div class="fence-container">
        <div class="scale">
          <div class="fence fence-1"></div>
          <div class="fence fence-2"></div>
          <div class="fence fence-1"></div>
          <div class="fence fence-2"></div>
          <div class="fence fence-1"></div>
          <div class="fence fence-2"></div>
          <div class="fence fence-1"></div>
          <div class="fence fence-2"></div>
          <div class="fence fence-1"></div>
          <div class="fence fence-2"></div>
          <div class="fence fence-1"></div>
          <div class="fence fence-2"></div>
          <div class="fence fence-1"></div>
          <div class="fence fence-2"></div>
          <div class="fence fence-1"></div>
          <div class="fence fence-2"></div>
          <div class="fence fence-1"></div>
          <div class="fence fence-2"></div>
          <div class="fence fence-1"></div>
          <div class="fence fence-2"></div>
          <div class="fence fence-1"></div>
          <div class="fence fence-2"></div>
          <div class="fence fence-1"></div>
          <div class="fence fence-2"></div>
          <div class="fence fence-1"></div>
          <div class="fence fence-2"></div>
          <div class="fence fence-1"></div>
          <div class="fence fence-2"></div>
          <div class="fence fence-1"></div>
          <div class="fence fence-2"></div>
          <div class="fence fence-1"></div>
          <div class="fence fence-2"></div>
        </div>
      </div>
    </div>

CSS Piece:

#roof {
  top: 0;
  width: 500px;
  height: 100px;
  background-color: #cd6666;
}

.fence-container {
  width: 500px;
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;

}

.fence-container div.fence-1 {
  transform: rotate(45deg);
}

.fence-container div.fence-2 {
  transform: rotate(-45deg);
}

.scale {
  transform: scale(1.3);
}

.fence {
  display: inline-block;
  width: 10px;
  height: 200px;
  background-color: saddlebrown;
}

My reslut:

image
image1444×1159 39.9 KB

I try to use flex layout model and crossing the flex items (bars) using transform to rotate them.Then use overflow to hide the exceeded part.

image
image1445×1162 57.5 KB

These are all I can think of based on the knowledge I remembered.HaHa…

Pre-thanks for your reply and correcting!!!
If I do not express my idea clearly,Please tell me in the comment area!

Course Source: Build a House Painting

2

I think it’s repeating linear gradient, not multiple elements

well, two repeating gradients at 90deg from each other

3

I had thought about using linear gradient,but finally I gave up. :thinking:

4

you can use two repeating-linear-gradients as background for the same element, I think it’s how the sample project does it

1 Like