Unique CSS Borders Challenge

[toad78]

I have a design I’m developing from that has some unique borders I’m sure can be accomplished with the usage of ::before/::after pseudos. While I can create slices of the ‘borders’ within the image design, they won’t be very responsive. I’d rather use CSS. Here are screenshot examples of what I’m trying to work with:

screenshot one
screenshot two
screenshot three

Some of the borders are rather unique. For screenshot three, the top border I’m sure could be split in two (one for ::before and one for ::after the first headline text). However, it’s the perpendicular lines that throw me a little bit (I’m sure I’ll have to use ‘calc(x,x)’ and solid transparent borders to produce the lines). The real challenging one I’m seeing is for screenshot one.

I attempted to work with screenshot 3 (a post slider), and the code is below. I had to set up a ::before psuedo to add a title to the slider. So I’m thinking I may have to add a wrapper around the .et_pb_slider in order to add the broken border around the title?

I appreciate the brainstorm and ideas. Thank you.

.et_pb_slider_0.et_pb_slider::before {
  content: "Meet Our Team";
  font: 600 3vw/1em "Oswald",sans-serif;
  text-transform: uppercase;
  color: #000;
  text-align: center;
  display: block;
  padding: 0 10px;
  margin-left: auto;
  margin-right: auto;
}

<div class="et_pb_column et_pb_column_1_3 et_pb_column_1  et_pb_css_mix_blend_mode_passthrough">	
<div class="et_pb_with_border et_pb_module et_pb_slider et_pb_slider_0 et_pb_slider_fullwidth_off et_pb_slider_no_pagination et_pb_bg_layout_dark" data-active-slide="et_pb_slide_0">
				<div class="et_pb_slides">
					<div class="et_pb_slide et_pb_slide_0 et_pb_bg_layout_dark et_pb_slide_with_image et_pb_media_alignment_center et-pb-active-slide" data-slide-id="et_pb_slide_0">
<div class="et_pb_container clearfix" style="height: 481.55px;">
					<div class="et_pb_slider_container_inner">
						<div class="et_pb_slide_image" style="margin-top: -147px;"><img decoding="async" src="http://localhost/divi/wp-content/uploads/2023/04/Deniz2-11.jpg" alt="" class="wp-image-238190 active" style="max-height: 421.334px;" width="1200" height="1200"></div>
						<div class="et_pb_slide_description">
							<h2 class="et_pb_slide_title">Nihat Deniz Bayramoglu</h2><div class="et_pb_slide_content"><p>Attorney At Law</p></div>
							<div class="et_pb_button_wrapper"><a class="et_pb_button et_pb_more_button" href="#">Meet Nihat</a></div>
						</div>
					</div>
				</div>
			</div>
			<div class="et_pb_slide et_pb_slide_1 et_pb_bg_layout_dark et_pb_media_alignment_center" data-slide-id="et_pb_slide_1">
				<div class="et_pb_container clearfix" style="height: 481.55px;">
					<div class="et_pb_slider_container_inner">						
						<div class="et_pb_slide_description">
							<h2 class="et_pb_slide_title">Your Title Goes Here</h2><div class="et_pb_slide_content"><p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p></div>
							<div class="et_pb_button_wrapper"><a class="et_pb_button et_pb_more_button" href="#">Click Here</a></div>
						</div>
					</div>
				</div>
			</div>			
				</div>				
			<div class="et-pb-slider-arrows"><a class="et-pb-arrow-prev" href="#"><span>Previous</span></a><a class="et-pb-arrow-next" href="#"><span>Next</span></a></div></div></div>

[Archibald]

Consider using an SVG background as demonstrated in yellow here:

(Responsive design needs to be considered)

[PaulOB]

I’m not on a desktop at the moment but I found a few old demos of mine that may help.

https://codepen.io/paulobrien/pen/JjOaZqd

They use a combination of pseudo elements and border image slices with linear gradients.

I’m sure your designs could be accommodated with those techniques. I’ll take a look when I get back later this afternoon. (For your screenshot 1 I would do it differently and use flex for the 2 orders either side of the text to allow different amounts of text rather than rubbing a line out.)

[PaulOB]

@toad78

The real challenging one I’m seeing is for screenshot one .

I’d do something like this assuming you can use your own html.

The others could use similar techniques and you could use pseudo elements with linear gradients for the vertical lines to get gaps in the lines as required.

e.g. Like this:

Or perhaps more simply with border-image.

https://codepen.io/paulobrien/pen/YzJpooX

and just for fun

https://codepen.io/paulobrien/pen/eYPgNXg

[toad78]

Hey, @PaulOB.
You always seem to pull through with answers and great examples! I will take a look at these and see how I can implement them in my designs.

[toad78]

Hey, @Archibald.
Thank you for taking the time to offer the suggestion!

I never really thought about SVG, which is a great idea. However, as customized as some of the designs I’m encountering with these borders (I didn’t provide all of the designs I have to develop), I’m wondering if using SVG is going to be more work? There’s all kinds of broken border designs, and I’m looking for a solution that will work across the board on all devices with little CSS bloat as possible.

Do you think your method would accomplish this?

[toad78]

So one caveat I did encounter is the button, as this isn’t outside of the “box” but within the “description” container, which is layered within the slide itself. I would like to detach and append it to another area of the slide container, but I’m always getting hit with a “Uncaught SyntaxError: expected expression, got ‘.’” error.

So the majority of the styling I’ve done is working with the exception of the way the <div class="et_pb_button_wrapper"> is inlaid in the <div class="et_pb_slide_description"> container.

I’ve tried to use jQuery('.post-slider-with-title .et_pb_button_wrapper'>.detach().appendTo('.btn-wrap'); but it keeps posting a Uncaught SyntaxError: expected expression, got '.' error. If I can get that to work, then I’d imagine styling the broken border around the button would be a breeze.

<div class="et_pb_with_border et_pb_module et_pb_slider et_pb_slider_0 post-slider-with-title et_pb_slider_fullwidth_off et_pb_slider_no_pagination et_pb_bg_layout_dark" data-active-slide="et_pb_slide_0">
				<div class="sld-title"><h4>Meet Our Team</h4></div><div class="et_pb_slides">
					<div class="et_pb_slide et_pb_slide_0 et_pb_bg_layout_dark et_pb_slide_with_image et_pb_media_alignment_center et-pb-active-slide" data-slide-id="et_pb_slide_0">
				
				
				<div class="et_pb_container clearfix" style="height: 618.55px;">
					<div class="et_pb_slider_container_inner">
						<div class="et_pb_slide_image" style="margin-top: -177.5px;"><img decoding="async" src="http://localhost/divi/wp-content/uploads/2023/04/Deniz2-11.jpg" alt="" class="wp-image-238190 active" style="max-height: 540.92px;" width="1200" height="1200"></div>
						<div class="et_pb_slide_description">
							<h2 class="et_pb_slide_title">Nihat Deniz Bayramoglu</h2><div class="et_pb_slide_content"><p>Attorney At Law</p></div>
							<div class="et_pb_button_wrapper"><a class="et_pb_button et_pb_more_button" href="#">Meet Nihat</a></div>
						</div><div class="btn-wrap"></div>
					</div>
				</div>
				
				
				
			</div>
			<div class="et_pb_slide et_pb_slide_1 et_pb_bg_layout_dark et_pb_media_alignment_center" data-slide-id="et_pb_slide_1">
				
				
				<div class="et_pb_container clearfix" style="height: 618.55px;">
					<div class="et_pb_slider_container_inner">
						
						<div class="et_pb_slide_description">
							<h2 class="et_pb_slide_title">Your Title Goes Here</h2><div class="et_pb_slide_content"><p>Another Attorney</p></div>
							<div class="et_pb_button_wrapper"><a class="et_pb_button et_pb_more_button" href="#">Click Here</a></div>
						</div><div class="btn-wrap"></div>
					</div>
				</div>
				
				
				
			</div>
			
				</div>
				
			<div class="et-pb-slider-arrows"><a class="et-pb-arrow-prev" href="#"><span>Previous</span></a><a class="et-pb-arrow-next" href="#"><span>Next</span></a></div></div>

[PaulOB]

@toad78

I’ve tried to use jQuery('.post-slider-with-title .et_pb_button_wrapper'>.detach().appendTo('.btn-wrap')

You have an angle bracket instead of a normal bracket.

It should be jQuery('.post-slider-with-title .et_pb_button_wrapper').detach().

However you have multiple items so you will need to loop through them all.

Something like this should work.

const elements = jQuery(".post-slider-with-title .et_pb_button_wrapper");
const btns = jQuery(".post-slider-with-title .btn-wrap");

elements.each(function (i, el) {
  jQuery(el).detach().appendTo(jQuery(btns)[i]);
});

If we could see the page it might be possible to offer styling suggestions without having to change the html.

[toad78]

You have an angle bracket instead of a normal bracket.
Rookie mistake! Ugh. Thank you for catching that.

However you have multiple items so you will need to loop through them all.
THIS construct is VERY helpful! Thank you, PaulOB!

“If we could see the page it might be possible to offer styling suggestions without having to change the html.”

I’m working on a local server but plan on getting something on screen soon, if I can’t get the borders to work accordingly.

[Archibald]

@toad78

There’s all kinds of broken border designs, and I’m looking for a solution that will work across the board on all devices with little CSS bloat as possible.

As hinted in my previous post, the challenge when using SVGs in a background is coping with changes of aspect ratio caused by responsive web design.

You can use more than one SVG in a background. Here I demonstrate using six SVGs for the background of an element of percentage width but fixed height:

That works quite well when the width of browser window is changed. If you change the height the SVGs on the left and right side do not change their heights. For fixed height that could be just two SVGs.