Today I managed to realize a background for my blockquote elements quite good (you can see here, the last blockquote).
But I wonder if (and how) I could refine this even better. I mean, in particular, how to get with css, the borders the more like to this example, that is so to say irregular (in Italian I would say “frastagliato”). As in above example.
That’s using an SVG filter to get the irregular border. Do a search for wavy2 in the html and css to see how they applied it.
Try it on your site to see how far you get…
2 Likes
This is how far I got 
It wasn’t as straight forward as it seemed.
1 Like
Therefore, I have to add an inline svg every time I want to apply that style? I cannot link it (preferably adding it to a css rule)?
No you only need the one svg on each page. You can call it multiple times.
2 Likes
ok, thank you very much. I can do this, adding this to my footer.
A last question: the bottom-border is, so to say, to “violent”: how could I make it more similar to the other three (left, right and top)?
I mean, a bit more regular.
Try changing the scale=20 to 10 in the svg code.
I’m not sure you can change one side but it looks more accentuated because of the box shadow I think.
1 Like
EDIT
Yes, changing scale from 20 to 10 helps.
But the top (and the left) border - now and before this change - is somehow “cut”.
I don’t understand why…
Is this any better? I just played around a bit.
Or:
2 Likes
Thank you. Sorry, but with all my (css) code your appreciated efforts seems don’t work.
It remain that the the top and the left border are cut (by a line)…
I however can upload the new style, so that if you want, you can see it (here) in its whole ‘context’.
EDIT
I noticed another (little) problem: with a svg at the bottom of a page, I have there an empty space.
With display: none, the effect goes…
You should hide the default svg off screen instead. e.g. position:fixed;left -999rem;top:-999rem;
In my example I only used the inset box-shadow and then used a drop-shadow on the filter for a better effect.
Yours:
Mine in your page:
You don’t seem to have used the noise svg which makes the whole thing look better IMO.
perfect! This is solved!
Indeed, no, I didn’t. It a “taste” question
But I see that even adding that noise the problem remain…
It seems a problem of padding (left and top)…
Modifying the svg (feTurbulence x="2" y="2") something is better…
1 Like
Yes , I think you will just have to fine tune it until it suits your eye
1 Like
Thank you!