special border
I am making a border around the edge of my screen.
The 4 corners are perfectly spaced. Using flex space between.
However, I want the borders to match inline with the corners with no overflow. It must be responsive. You can see my problem im having in the codepen https://codepen.io/GrayHay/pen/VwgLepw
I am trying to go for the outer border look on the minecraft gui screens
18 Replies
this is my concept art. see the image edges how they are laid out? i have the corners good, but the fact i cant repeat a image withought background repeat makes the long borders difficult
looks to me like your just trying to recreate
border-imagecan i define certian images to go on each side? like i said, there are 8 different files for the border. 4 different files for the corners, and 4 different files for the sides
all im seeing from my research is you can only use 1 image for the whole thing
WOAH IT ACTUALLY IS SO COOL OMG THANK YOU SO MUCH YOU ARE AMAZXING
how do i get the bottom of it to fit to the bottom of the screen? i want it to stretch all around @capt_uhu
you can use grid for that
https://codepen.io/MarkBoots/pen/gOqpRJb
there's talk about doing what you are asking here for a future version of
border-image (https://github.com/w3c/csswg-drafts/issues/9183) but for now yes you just use one image.
would suggest avoiding doing this styling on the body element. body and html are special elements with different defaults than other elements so it's usually best to avoid styling them if you can.not to difficult to remake those files.
i created 16x16 svg files, borders are 4
That's what I came up with, but I'll probably use your grid method because mine currently doesn't like being resized
what do you mean by "it doesn't like being resized"? What does it do that you don't want when it resizes? Can you make a codepen for us to look at?
can codepen store site files or do i need to have a cdn link
see how it stretches out?
thats the code for the outer and inner border. I nested the inner border inside the outer one thinking that it would contain it]
i believe codepen allows asset uploads but you might need to have a paid account for that? What I do for quick stuff like this is just make a data uri (https://onlinepngtools.com/convert-png-to-data-uri)
first thing is that your
position:fixed; is whats causing the child elements to break out of their containers
you don't need an empty element to add your border just add the border class to the content like so class="content border"i wnat the inner border to be 50px on the side from all the sides of the inner border. Right now the inner border is child to the body and i want it to be child to the outer border
hey forked this to play around with it a bit: added a
box-sizing: border-box; to help with sizing issues (removes the need for the 100% minus). Added a margin-inline for your 50px from the sides request. What's the purpose of the element with the class of stop? https://codepen.io/jsnkuhn/pen/gOqaMEN?editors=1100