Shape separator-CSS examples

Shape separator-CSS examples, someone asked me to explain?

Separating two different blocks with SVG shapes creates a more interesting visual appearance than standard horizontal separation.


<div class="shape-separator">


.shape-separator {
  position: relative;
  height: 48px;
  background: #333;
.shape-separator::after {
  content: '';
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCI+PHBhdGggZD0iTTEyIDEybDEyIDEySDBsMTItMTJ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
  position: absolute;
  width: 100%;
  height: 24px;
  bottom: 0;


Shape separator -CSS examples


  1. position: relative A Cartesian positioning context is established on the element for the pseudo element.
  2. ::after Define pseudo elements.
  3. background-image: url(...) Add a SVG shape (24 x 24 in the base64 format) to the background image of the pseudo-element, which is repeated by default. It must be the same color as the block to be separated.
  4. position: absolute Takes a pseudo-element from the document stream and positions it relative to the parent element.
  5. width: 100% Make sure the element stretches the entire width of its parent element.
  6. height: 24px Same height as shape.
  7. bottom: 0 Position the pseudo-element at the bottom of the parent element.

Post your comments / questions