css之分割线特效

温馨小提示，下面的盒子用的都是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%);
          }