andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Revamp snippet descriptions

Browse Source
This commit is contained in:
Chalarangelo
2020-12-30 15:37:37 +02:00
parent 27bae0477f
commit 16a4e06e85
59 changed files with 341 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
snippets/shape-separator.md
View File

@@ -3,15 +3,11 @@ title: Shape separator
tags: visual,intermediate
---
Uses an SVG shape to separate two different blocks to create more a interesting visual appearance compared to standard horizontal separation.
Uses an SVG shape to create a separator between two different blocks.
- `position: relative` on the element establishes a Cartesian positioning context for pseudo elements.
- `:after` defines a pseudo element.
- `background-image: url(...)` adds the SVG shape (a 24x12 triangle) as the background image of the pseudo element, which repeats by default. It must be the same color as the block that is being separated. For other shapes, we can use [the URL-encoder for SVG](http://yoksel.github.io/url-encoder/).
- `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
- `width: 100%` ensures the element stretches the entire width of its parent.
- `height: 12px` is the same height as the shape.
- `bottom: 0` positions the pseudo element at the bottom of the parent.
- Use the `:after` pseudo-element to create the separator element.
- Use `background-image` to add the SVG (a 24x12 triangle) shape via a data URI. The background image will repeat by default, covering the whole area of the pseudo-element.
- Use the `background` of the parent element to set the desired color for the separator.
```html
<div class="shape-separator"></div>
@@ -21,12 +17,12 @@ Uses an SVG shape to separate two different blocks to create more a interesting
.shape-separator {
position: relative;
height: 48px;
background: #333;
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='%23fff'/%3E%3C/svg%3E");
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;