Visual cue with an inverted V using SVG

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.

Related Posts

Leave a Reply

Your email address will not be published.