How to Make a Paper Clip Using Pure CSS

screenshot of a newsletter signup form on a website, with the paper clip in this article attachedSomething fun I’m working on for the update to Wand’rly Magazine.

I wanted to make a paperclip without using any icons or addition graphics. I actually ended up doing it without any additional HTML elements as well, but here’s how you can make one with just one <span>.

The HTML:

<span class="paper-clip"></span>

The CSS:

span.paper-clip:after {
width: 11px;
height: 20px;
content: " ";
background: white;
display: block;
position: absolute;
right: 2px;
top: 5px;
border-radius: 10px;
border: 2px solid black;
border-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
span.paper-clip {
background: white;
height: 40px;
width: 15px;
border-radius: 10px;
border: 2px solid black;
display: inline-block;
position: absolute;
}

There you go!

But it doesn’t look like a full paper clip?

You’re right, the idea here is you absolutely position it just so that it looks like it’s actually slipped around some other element (our “paper”). The end result is something like this:

Up Next: List Hierarchical Custom Taxonomy Terms for a Post in an Unordered List