div之间的造型师

Question

我有这个结构：

<section class="background">
 <div class="container>

 </div>
</section>

<section>
 <div class="container>

 </div>
</section>

第一部分有一个背景图像

根据图像，我想对div之间的划分进行风格化：

有关如何入门的任何建议？感谢

Answer 1

您可以为两个部分创建一个容器，为其应用背景颜色，然后在第一部分添加margin-botton。没有办法直接针对两个div之间的划分。以下是代码;展开剪切以使其运行。

＆＃13;

＆＃13;

.background {
  margin: 0 0 1px 0;
}
.container-1 {
  background: red;
}
.container-2 {
  background: green;
}
.section-container {
  background: yellow;
}

＆＃13;

<div class='section-container'>
  
  <section class="background">
   <div class="container-1">
   First section
   </div>
  </section>

  <section>
   <div class="container-2">
   Second section.
   </div>
  </section>
  
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将此作为起点。

＆＃13;

＆＃13;

.arrow, .arrow2 {
   position: absolute;
   top: 0;
   left: 50%;
   right: 50%;
   width: 0;
   height: 0;
}
.arrow {
   z-index:20;
   border-left: 33px solid transparent;
   border-right: 33px solid transparent; 
   border-top:40px solid yellow;
   margin-left: -3px;
}
.arrow2 {
   z-index:100;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent; 
   border-top:30px solid red; 
}
.bar {
   position: absolute;
   top: 0;
   height: 2px;
   width: 100%;
   background-color: yellow;
 }
.container-1 {
   background: red;
   height: 80px;
}
.container-2 {
   background: green;
   position: relative;
   height: 80px;
}

＆＃13;

<div>
  
  <section>
   <div class="container-1">
   First section
   </div>
  </section>

  <section>
   <div class="container-2">
       <div class="arrow"></div>
       <div class="arrow2"></div>
       <div class="bar"></div>
   Second section.
   </div>
  </section>
  
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

也许您可以尝试在第一个canvas和第二个section之间添加section块。然后，您可以“绘制”任何类型的三角形或其他形状，并随时更改颜色。您所要做的就是确保第一个section的底部与第二个section的顶部对齐，canvas的底部与顶部对齐第二个section，canvas与第一个section重叠。

<section class="background">
   <div class="container>
      ...
   </div>
</section>
<!-- this will act as your section border, style it as you wish -->
<canvas class="triangle">
    ...
</canvas>
<section>
   <div class="container>
      ...
   </div>
</section>