Shape separator Uses an SVG shape to separate two different blocks to create more a interesting visual appearance compared to standard horizontal separation.

PHOTO EMBED

Mon Mar 08 2021 21:15:57 GMT+0000 (UTC)

Saved by @randomize_first #css

.shape-separator {
  position: relative;
  height: 48px;
  background: #333;
}
.shape-separator::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='%23fff'/%3E%3C/svg%3E");
  position: absolute;
  width: 100%;
  height: 12px;
  bottom: 0;
}
content_copyCOPY