温馨小提示，下面的盒子用的都是Grid布局，如果想要其他布局可以点击这里 CSS Grid Generator

盒子html

<div class="parent1"><div class="div1">斜分割线</div><div class="div2">SETTINGS</div><div class="div3">HTML</div><div class="div4">CSS</div><div class="div5">1</div><div class="div6">2</div></div>

盒子css

        .parent1 {z-index: 1;width: 400px;height: 200px;border-radius: 4px;background-color: rgba(255, 255, 255, 0.7);display: grid;grid-template-columns: repeat(11, 1fr);grid-template-rows: repeat(6, 1fr);grid-column-gap: 0;grid-row-gap: 0;box-shadow: 0 2px 1px -1px rgb(0 0 0/20%), 0 1px 1px 0 rgb(0 0 0/14%), 0 1px 3px 0 rgb(0 0 0/12%);}.div1, .div2, .div3,.div4 {display: flex;justify-content: center;align-items: center;}.div1 { grid-area: 1 / 5 / 2 / 8; }.div2 { grid-area: 2 / 1 / 3 / 4; }.div3 { grid-area: 2 / 5 / 3 / 8; }.div4 { grid-area: 2 / 9 / 3 / 12; }.div5 { grid-area: 4 / 3 / 5 / 10; }.div6 { grid-area: 6 / 3 / 7 / 10; }

斜分割线

• html

  <section><div class="parent1"><div class="div1">斜分割线</div><div class="div2">SETTINGS</div><div class="div3">HTML</div><div class="div4">CSS</div><div class="div5">1</div><div class="div6">2</div></div><div class="skewed"></div>
  </section>
  

• css

      .slash{position: relative;margin: 0 2%;box-sizing: border-box;width: 40%;height: 300px;display: flex;justify-content: center;align-items: center;}.skewed {position: absolute;inset: 0;width: 100%;height: 100%;background: #2c3e50;z-index: 0;transform: skewY(10deg);transform-origin: top right;}
  

 

 

锯齿分割线

• html

  <section class="spikes"><div class="parent1"><div class="div1">锯齿分割线</div><div class="div2">SETTINGS</div><div class="div3">HTML</div><div class="div4">CSS</div><div class="div5">1</div><div class="div6">2</div></div>
  </section>
  

• css

   .spikes {position: relative;background: #2c3e50;height: 300px;margin: 0 2%;width: 40%;display: flex;justify-content: center;align-items: center;}.spikes::after {content: '';position: absolute;right: 0;left: -0%;top: 100%;z-index: 10;display: block;height: 20px;background-size: 20px 100%;background-image: linear-gradient(135deg, #2c3e50 25%, transparent 25%), linear-gradient(225deg, #2c3e50 25%, transparent 25%);background-position: 0 0;}
  

 

 

半圆分割线

• html

  <section class="semicircle"><div class="parent1"><div class="div1">半圆分割线</div><div class="div2">SETTINGS</div><div class="div3">HTML</div><div class="div4">CSS</div><div class="div5">1</div><div class="div6">2</div></div>
  </section>
  

• css

          .semicircle {margin: 10% 2%;position: relative;background: #2c3e50;height: 300px;width: 40%;display: flex;justify-content: center;align-items: center;}.semicircle::before {position: absolute;content: '';left: 50%;z-index: 10;width: 100px;height: 100px;border-radius: 50%;background: inherit;transform: translateX(-50%) translateY(50%);bottom: 0;}
  

 

 

波浪线分割线

• html

  <section class="container"><div class="parent1"><div class="div1">波浪线分割线</div><div class="div2">SETTINGS</div><div class="div3">HTML</div><div class="div4">CSS</div><div class="div5">1</div><div class="div6">2</div></div><div class="wave"></div>
  </section>
  

• css

  .container {margin: 10% 2%;position: relative;background: #2c3e50;height: 300px;width: 40%;display: flex;justify-content: center;align-items: center;}.wave {position: absolute;height: 70px;width: 100%;background: #2c3e50;bottom: 0;}.wave::before, .wave::after {content: "";display: block;position: absolute;border-radius: 100% 50%;}.wave::before {width: 55%;height: 109%;background-color: #fff;right: -1.5%;top: 60%;}.wave::after {width: 55%;height: 100%;background-color: #2c3e50;left: -1.5%;top: 40%;}
  

 

 

弯曲分割线

• html

  <section class="curved"><div class="parent1"><div class="div1">弯曲分割线</div><div class="div2">SETTINGS</div><div class="div3">HTML</div><div class="div4">CSS</div><div class="div5">1</div><div class="div6">2</div></div>
  </section>
  

• css

  .curved {position: relative;width: 40%;height: 300px;display: flex;justify-content: center;align-items: center;margin: 10% 2%;background: #2c3e50;border-bottom-left-radius: 50% 20%;border-bottom-right-radius: 50% 20%;}
  

 

 

三角形分割线

• html

  <section class="triangle"><div class="parent1"><div class="div1">三角形分割线</div><div class="div2">SETTINGS</div><div class="div3">HTML</div><div class="div4">CSS</div><div class="div5">1</div><div class="div6">2</div></div>
  </section>
  

• css

   .triangle {margin: 10% 2%;position: relative;background: #2c3e50;height: 300px;width: 40%;display: flex;justify-content: center;align-items: center;}.triangle::before {content: '';position: absolute;bottom: 0;width: 0;height: 0;border-style: solid;border-width: 60px 60px 0 60px;border-color: #2c3e50 transparent transparent transparent;left: 50%;transform: translateX(-50%) translateY(100%);}