Does anyone know how I could create a similar section divider as shown in the design below? The rough edge with lines breaking through both above and below divider? I assume maybe using the before and after pseudo class but would be good if there was a tutorial or guide somewhere.
I would guess that it is obtained using already made images, not with css
1 Like
It’s an image, same colour as the ecru background on the middle element, with transparency. So a ::before on that middle element. Position it absolutely at the top of the element and 100% width. Set the image as background. Then an ::after on the middle element, exactly the same but positioned at the bottom and rotated 180 degrees.
1 Like
Thank you. I didn’t consider that. It looks like it uses SVG images which I haven’t learnt yet. I will look into them.
You can just treat it as an image, exactly same if you’re using it as a background. Realistically it’s going to be that or a PNG, as need transparency.
With SVG, can also use it inline, so it isn’t an image, just an element that can be styled with CSS, but it wouldn’t use before or after in that case, you’d literally put the SVG code in the HTML
1 Like