0

I'm creating a tile installation help website and would like to style an element's border to resemble a notched trowel:

[nothced trowel]https://www.flooranddecor.com/installation-tools-tile-stone-installation-materials/pacesetter-square-notched-trowel-100381193.html

Is it possible to crop out shapes at a specified interval to achieve this look? What I've found so far is to use pseudo-elements to get the desired pattern, like this:

Wave border in CSS

However, I need something that will subtract one from the other so that the border alternates between opaque and transparent.

Alex Ertl
  • 1
  • 3

1 Answers1

0

You can do this! It's actually quite easy, I would recommend reading This w3schools page on borders

I believe what you're asking could be done with left and up borders being solid and bottom and right being dotted (the same color as your background). I hope this helps

Joel Banks
  • 141
  • 3
  • 14
  • That would work if I was just using solid colors, but I'm trying to do an image over an image. I made a .png by cutting out squares with Paint.net to demonstrate: https://imgur.com/UBLnog0 – Alex Ertl Nov 09 '17 at 00:20
  • @AlexErtl Can you elaborate on what your goal is a little more? – Joel Banks Nov 09 '17 at 00:22
  • I would like to use it as a container for my navigation, so I'm trying to make it as dynamic as I can. The image I posted to imgur shows what it would like expanded. – Alex Ertl Nov 09 '17 at 00:26