67 lines
2.2 KiB
Markdown
67 lines
2.2 KiB
Markdown
### Shape separator
|
|
|
|
Uses an SVG shape to separate two different blocks to create more a interesting visual appearance compared to standard horizontal separation.
|
|
|
|
#### HTML
|
|
|
|
```html
|
|
<div class="shape-separator"></div>
|
|
```
|
|
|
|
#### CSS
|
|
|
|
```css
|
|
.shape-separator {
|
|
position: relative;
|
|
height: 48px;
|
|
}
|
|
.shape-separator::after {
|
|
content: '';
|
|
background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCI+PHBhdGggZD0iTTEyIDEybDEyIDEySDBsMTItMTJ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 24px;
|
|
bottom: 0;
|
|
}
|
|
```
|
|
|
|
#### Demo
|
|
|
|
<div class="snippet-demo is-distinct">
|
|
<div class="snippet-demo__shape-separator"></div>
|
|
</div>
|
|
|
|
<style>
|
|
.snippet-demo__shape-separator {
|
|
position: relative;
|
|
height: 48px;
|
|
margin: -0.75rem -1.25rem;
|
|
}
|
|
.snippet-demo__shape-separator::after {
|
|
content: '';
|
|
background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCI+PHBhdGggZD0iTTEyIDEybDEyIDEySDBsMTItMTJ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 24px;
|
|
bottom: 0;
|
|
}
|
|
</style>
|
|
|
|
#### Explanation
|
|
|
|
1. `position: relative` on the element establishes a Cartesian positioning context for psuedo elements.
|
|
2. `::after` defines a pseudo element.
|
|
3. `background-image: url(...)` adds the SVG shape (a 24x24 triangle in base64 format) as the background image
|
|
of the psuedo element, which repeats by default. It must be the same color as the block that is being
|
|
separated.
|
|
4. `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
|
|
5. `width: 100%` ensures the element stretches the entire width of its parent.
|
|
6. `height: 24px` is the same height as the shape.
|
|
7. `bottom: 0` positions the pseudo element at the bottom of the parent.
|
|
|
|
#### Browser support
|
|
|
|
<span class="snippet__support-note">✅ No caveats.</span>
|
|
|
|
* https://caniuse.com/#feat=svg
|