I am trying to create in CSS a border pattern to apply on the top and bottom of my content. It should look like this (the teeth should be black):
+--------------------+
|\/\/\/\/\/\/\/\/\/\/|
| |
| the actual |
| content |
|/\/\/\/\/\/\/\/\/\/\|
---------------------+
I am trying to make the teeth black and the rest of the border area transparent.
My main idea is to work with background-image and linear-gradient.
I have managed to draw the left half of a black tooth with:
linear-gradient(45deg, white 0 50%, black 50% 100%)
... and the right half with:
linear-gradient(135deg, black 0 50%, white 50% 100%)
The plan is the to put the two halves side-by-side and then simply use background-repeat: repeat-x to paint as many teeth as are necessary for the width. That would allow me to do the top row of the teeth and then I would do the bottom row in a similar manner.
The plan fails because I cannot stack the two parts of the tooth horizontally, side by side.
Online playground is here. Can you help me finish the top row of teeth?
