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.
.arrow-up { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid black; }
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.
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='30' height='20'> <path d='M 1,19 L 15,1 L 29,19' /> </svg>
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.
.visual-cue { margin-top: -38px; svg path { stroke-width: 1; stroke: $borders; fill: $white; } }
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.
import React from 'react'; const VisualCue = ({ marginLeft }) => ( <div className='visual-cue' style={{ marginLeft }}> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' class='svg-triangle' width='30' height='20'> <path d='M 1,19 L 15,1 L 29,19' /> </svg> </div> ); export default VisualCue;
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.