Have you ever seen A Single Div by Lynn Fisher? The following example is in no way as impressive but follows the same concept: drawing an item using CSS and only one HTML div.
I was inspired by seeing this site explaining the concept of using multiple values in the border-radius value. I already knew you could do this, but looking at the shape reminded me of a shield, and things escalated from there.
See the Pen Shield by Claire (@claireparker) on CodePen.
In the rest of this post, I’ll explain the CSS I used to create this image.
Note: I’m using CSS variables to set colours throughout my examples.
First create a single div with a class name of ‘shield’ and set a height and width. Apply a border. Then the fun begins: use border-radius to create the shape. Read this article by the creators of the tool I linked above to learn more about how the slash values create this shape.
Use a linear-gradient to create a horizontal line across the middle of the cross shape. At each intersection of the transparent colour and blue cross colour, use an identical percentage for the color-stop value. This creates a hard line between the colours instead of the fading gradient. I’ve defined the width of the line as 10% of the overall shield. By starting at 35%, I’ve postiioned the cross at a what I think is a pleasing distance partway down the shield instead of exactly halfway.
We can apply multiple gradients to the background-image property by comma-separating them. For this second gradient, do something similar but add 90deg as the first argument. This rotates the gradient. Change the percentages of the color-stops so that the line is exactly halfway along the shield area.
Finally, add a third gradient for the background. This could also be achieved by adding a plain background-color, but I wanted to use a gradient to give the shield a little depth.
Use your new shield to protect you from bugs in your code!