What is the coolest CSS work that you have done? This is an interview question for which I did not have a good answer. My answer never had the WoW factor. My answer previously was:

I am good at vertically centering text within a block.

With CSS 3 flex, centering text within a block can be achieved with ease.

I am not known for my CSS work. So, I never got much of a chance to do cool stuff. Yesterday, I was asked to do the following visual cue.

I am not an expert at CSS. Thankfully, I received the following CSS as a starting point.

To my surprise, the CSS drew a triangle. The triangle had a height of border-bottom-width and was filled with black color.

This got me thinking. I knew I could draw simple shapes using SVG. I decided to do the visual cue with SVG. The SVG below draws an inverted V.

The inverted V now needs to be placed at the top of the block. SVG border should be 1 pixel thick with grey color. It should be filled with white color.

The final part of the puzzle was to position the visual cue horizontally. The horizontal position is flexible. Since I was using React, the horizontal position can be supplied via a prop to the VisualCue component.

There are several places within the app to place the VisualCue┬ácomponent. I felt satisfied about doing the inverted V using SVG – my coolest CSS work so far.

Visual cue with an inverted V using SVG
Tagged on: