CSS Tape Effect - My take on the tape
I run into problems sometimes when I am figuring out how to code a project, layouts, etc. Instead of dwelling on the problem, I take a break and look for little toys to play with. This time, I found some CSS for a piece of semi-transparent tape that required no image.
I found several examples, but invariably, the top image most common (without the angle transform I made). If you tell me it’s supposed to be a piece of tape, I’ll believe you…for the time being. I usually code something like this and leave it in a place where it is visible to me for a while. In this case, after a brief period of time, the piece of tape looked exactly like what it was: a semi-transparent rectangle.
I chose to tweak it with a linear gradient background, some corner border radius “deformities” and semi-opaque left/right dashed borders for a serrated edge look. I’m happy with it.