Zig Zag borders on all sides?

HTML & CSS
1

Hi there,

I am trying to create a content box that has a zig zag border around all sides, similar to this:

image
image748×467 168 KB

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 what I have:
https://jsfiddle.net/toolman/7azqhxcu/1/

Can anyone help me with this?

Thanks

2

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.

2 Likes
3

I agree with @SamA74, such small image could even be a data url (base64 png).

https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

1 Like
4

Thanks for the replies. Yes, I have seen the border-image property, but wondered if it is do-able with just CSS

I will have a play around

5

Border-image is CSS. :slightly_smiling_face:

6

:upside_down_face: I mean’t without images :upside_down_face:

7

See post #3.

1 Like
8

Here’s 2 demos using svg and linear gradients.

I haven’t had time to play around with the border-image method as my computer crashed and wasted a day restoring it.:frowning:

3 Likes
9

Thanks @PaulOB I really appreciate your time helping with this. The third one in the examples is great and I will have a play with that.

Hope your computer is ok! I hate it when that happens, it’s the little things that you miss like shortcuts etc :upside_down_face:

10

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).:slight_smile:

11

I had a go last night.
Which I did not get around to finishing until just now.

It uses border-image with an SVG as a data URL, rather than a file.

4 Likes
12

Thank you @SamA74 too :slight_smile: that is awesome

2 Likes
13

Good job. Much better than my attempt :slight_smile:

2 Likes
14

I have had a play with @PaulOB’s version, but can’t seem to get the transparency right.

This is my code:

         <div class="banner-slider-info">
                <div class="jagged">
					<h1 class="caption-title">
						<?php
                    $slider_title = get_the_title();
                    echo '
						<span>'.esc_html($slider_title). ' '. '</span>';
                    ?>
					</h1>
					<div class="caption-content">
                        <?php the_excerpt(); ?>
						<?php //echo zigcy_lite_get_excerpt_content(absint($zigcy_lite_slider_excerpts));?>
					</div>
					<div class="sml-slider-btn">
						<a class="slider-button" href="
							<?php the_permalink(); ?>">
							<?php echo esc_html('shop Now','zigcy-lite'); ?>
						</a>
					</div>
                </div>
            </div>

The content inside the jagged class is also opaque. I have tried adding another div inside the jagged div 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?

15

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. :slight_smile:

2 Likes
16

Thank you, that, that worked perfectly :slight_smile: I will have a play with both examples.

Thanks everyone for all your great help as usual :slight_smile:

1 Like
17

Just for fun I simplified my border-image example and gave it a more ragged appearance rather than the uniform edges.

You can edit the color and opacity of the svg directly in the svg code (which is an inline value in the border-image css).

If you want to draw a better svg then this online tool will help you.

1 Like
18

Thanks for these examples.

I am trying to change the opacity of the SVG/background and keep the text content 100% opacity, but I can’t see where it is inline.

Should I be looking at this part?

background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><polygon points='40 0,0 40,40 80,80 40' style='fill:red;fill-rule:nonzero;'></polygon></svg>");?

Thanks

19

For the last example it’s here.

polygon style='fill:red;fill-opacity:0.7;' points='0 -1 13 20 4 32 15 45 2 51

You were looking at the code from the other example which can’t be made transparent otherwise the background gets a double transparency in places.

The last example in that codepen is the best version as it also paints the background.

20

I think I am looking at the wrong example. I can only see this one:

Or am I missing something? :upside_down_face: