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

Replace the base64 raster image in SVG with the vector path

Browse Source
This commit is contained in:
firefoxic
2018-07-17 03:16:46 +03:00
committed by atomiks
parent 41b6748f1e
commit 0e7d071f84
1 changed files with 6 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
snippets/shape-separator.md
View File

@ -18,10 +18,10 @@ Uses an SVG shape to separate two different blocks to create more a interesting
} }
.shape-separator::after { .shape-separator::after {
content: ''; content: '';
background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCI+PHBhdGggZD0iTTEyIDEybDEyIDEySDBsMTItMTJ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+); 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; position: absolute;
width: 100%; width: 100%;
height: 24px; height: 12px;
bottom: 0; bottom: 0;
} }
``` ```
@ -40,10 +40,10 @@ Uses an SVG shape to separate two different blocks to create more a interesting
} }
.snippet-demo__shape-separator::after { .snippet-demo__shape-separator::after {
content: ''; content: '';
background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCI+PHBhdGggZD0iTTEyIDEybDEyIDEySDBsMTItMTJ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+); 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; position: absolute;
width: 100%; width: 100%;
height: 24px; height: 12px;
bottom: 0; bottom: 0;
} }
</style> </style>
@ -52,12 +52,10 @@ Uses an SVG shape to separate two different blocks to create more a interesting
1. `position: relative` on the element establishes a Cartesian positioning context for pseudo elements. 1. `position: relative` on the element establishes a Cartesian positioning context for pseudo elements.
2. `::after` defines a pseudo element. 2. `::after` defines a pseudo element.
3. `background-image: url(...)` adds the SVG shape (a 24x24 triangle in base64 format) as the background image 3. `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/).
of the pseudo 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. 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. 5. `width: 100%` ensures the element stretches the entire width of its parent.
6. `height: 24px` is the same height as the shape. 6. `height: 12px` is the same height as the shape.
7. `bottom: 0` positions the pseudo element at the bottom of the parent. 7. `bottom: 0` positions the pseudo element at the bottom of the parent.
#### Browser support #### Browser support