Creating Shape Separators with CSS

Introduction

In this lab, we will be exploring how to create a shape separator using CSS. The separator will use an SVG shape to visually divide two different blocks. By using the ::after pseudo-element and setting the parent element's background color, we can easily customize the separator to match the overall design of our webpage. This lab will provide hands-on experience in creating a visually appealing and functional separator using CSS.

Skills Graph

Shape Separator

index.html and style.css have already been provided in the VM.

To create a separator element between two different blocks using an SVG shape, follow these steps:

1. Use the ::after pseudo-element.
2. Add the SVG shape (a 24x12 triangle) via a data URI using the background-image property. The background image will repeat by default and cover the whole area of the pseudo-element.
3. Set the desired color for the separator by using the background property of the parent element.

Use the following HTML code:

<div class="shape-separator"></div>

And apply the following CSS rules:

.shape-separator {
  position: relative;
  height: 48px;
  background: #9c27b0;
}

.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='transparent'/%3E%3C/svg%3E");
  position: absolute;
  width: 100%;
  height: 12px;
  bottom: 0;
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Shape Separator lab. You can practice more labs in LabEx to improve your skills.