Assistance with creating inverse on corners of div

Design help General
1

Good evening everyone. Im trying to design a menu for a pub/tavern and I just wanted to know if anyone knew how to create this effect on the corners of a div. It would be greatly appreciated, Thank you.

image
image1175Ă—689 96.3 KB

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Can someone please kindly asnwer this question?

3

Hi Joseph,

seems like @PixelGeek used a similar effect on one of his projects:

https://www.pixelgeek.co/project/mission-avenue-bar-and-grill

He included a screenshot on how the grid is settled up (take a look at the screenshot on the linked site). He used .svg files for the corners and lines for borders.

Wouldn’t work if you want to go for the grunge effects though.

1 Like
4

Why not? You can create those shapes with “holes” in them, you would only need to also create the straight horizontal and vertical lines as svg images. Might be tricky to get their line width right and consistent for various viewport width’s though…

1 Like
5

You are right, thanks for your addition! :person_raising_hand:t2:

I had Nelsons solution in mind. He made it easy to use with variable border dimensions. Going all .svg would work too.

6

I did something similar on a recent project and used border-image with an SVG to get a similar effect. It works pretty similarly to @PixelGeek’s setup without the need to use CSS grid:

image

Here’s the code I used to apply the effect to any element using the “ornateborder” combo class:

.ornateborder {
  border: 30px solid transparent;
  border-image: url(yourcdn.com/border.svg) 33.333% stretch;
  -webkit-border-image: url(yourcdn.com/border.svg) 33.333% stretch;
  border-image-outset: 25px;
}

Just get yourself a graphic that can be split up into 9 squares (acting as the sides and each corner of your element) and use the code from above. Keep in mind depending on the graphic you may need to adjust the border-size and border-image-outset properties so the div doesn’t interfere.

W3 Schools has a good example here of what your image should look like along with a couple varieties based on your usage.

1 Like