This is what I have, but I can’t get the zig zags on the sides. Also, I don’t know how to get the borders to have opacity. I can get the main content opaque, but not the sides.
This is the sort of thing I would probably use border-image for, as Paul linked to in your other topic.
Just a small PNG with alpha, or SVG would do it.
I did something simialr once where I had a paper texture as the background of a container, then had torn edges all around.
I added a border-image example which doesn’t need the extra background overlaid. However it’s a bit complex as I used an inline svg as the border-image. I’m sure it could be improved with a bit of time and effort…
Yes it’s a pain but luckily I have time machine backup on the mac so I restored everything back to last week which seems to have worked (fingers crossed).
The content inside the jaggedclass is also opaque. I have tried adding another div inside the jaggeddiv and set that to opacity: 1, but it is still showing opaque.
What would be the way round this to get the content to appear without any opacity and the jagged part/background to have opacity?
Just going offline but if you placed the new inner div absolutely and moved all the rules to the inner div including the :after rules for the new div then on the outer div you’d just have position relative and no other styling apart from dimensions if needed. The content then would not be part of the opacity.
I updated example 3 with the above code.
However I suggest you go with Sams example as it won’t suffer from that issue.