From 3cb8fb58f4001c01f81737aefd4724e4d6a34433 Mon Sep 17 00:00:00 2001 From: firefoxic Date: Tue, 17 Jul 2018 03:16:46 +0300 Subject: [PATCH] Replace the base64 raster image in SVG with the vector path --- snippets/shape-separator.md | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/snippets/shape-separator.md b/snippets/shape-separator.md index dbcc4d8a8..3b1c9ba2a 100644 --- a/snippets/shape-separator.md +++ b/snippets/shape-separator.md @@ -18,10 +18,10 @@ Uses an SVG shape to separate two different blocks to create more a interesting } .shape-separator::after { 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; width: 100%; - height: 24px; + height: 12px; 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 { 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; width: 100%; - height: 24px; + height: 12px; bottom: 0; } @@ -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. 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 pseudo element, which repeats by default. It must be the same color as the block that is being - separated. +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/). 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. +6. `height: 12px` is the same height as the shape. 7. `bottom: 0` positions the pseudo element at the bottom of the parent. #### Browser support