Shape Dividers: Basic CSS

By Matt Visiwig Matt Visiwig Portrait Jul 24, 2024

Below is the HTML, SVG, and CSS code used in my video Easy shape dividers with CSS + SVG.

<!DOCTYPE html>
<head>
   <style>
      body{
         margin: 0;
         font-size: 2rem;
         background: #1e1e1e;
         color: #FFF;
      }
      .section{
         padding: 30px;
      }
      #above{
         background: #000;
         margin-bottom: -5%;
      }
      #middle{
         background-image: 
         url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="%23000"><path d="M1000 0H0v52C62.5 28 125 4 250 4c250 0 250 96 500 96 125 0 187.5-24 250-48V0Z"></path></svg>'), 

         url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" transform="scale(-1,-1)" viewBox="0 0 1000 100" fill="%23808"><path d="M1000 0H0v52C62.5 28 125 4 250 4c250 0 250 96 500 96 125 0 187.5-24 250-48V0Z"></path></svg>'),         

         linear-gradient(60deg, #cc3f47, #f09f33);
         background-repeat: no-repeat;
         background-position: top, bottom, center;
         padding-top: 10%;
         padding-bottom: 10%;
         position: relative;
      }
      #below{
         background-color: #808;
         margin-top: -5%;      
      }
   </style>
</head>
<body>
   <div class="section" id="above">
      <p>id="above"</p>
   </div>

   <div class="section" id="middle">
      <p>—</p> 
      <p>id="middle"</p>
      <p>—</p>      
   </div>

   <div class="section" id="below">
      <p>id="below"</p>
   </div>
</body>

Shape Dividers: Basic CSS

Video of Shape Dividers: Basic CSS