HTML & CSS: How to skew an HTML entity

/ Chris Nielsen

Looking through the available HTML entities, I found a flattened DOWN arrow that uses the code ▾ For example:

▾

However, I could not find a similar flattened UP arrow amongst the defined HTML entities, so I found this CSS technique that will turn a regular unflattened UP arrow ▴

▴

into a flattened UP arrow. The trick is to place the HTML entity inside an HTML span element with a CSS class name, then in the CSS for that class name, use these two settings:

transform: scaleX(2); /* Stretch it x 2 on the x axis */
position: absolute;

Here is what the HTML looks like for the skewed entity:

<span class="skewed-up-arrow">&#9652;</span>

Here is the complete example and code on codepen:

See the Pen CSS skew up arrow html entity by Chris Nielsen (@Chris_Nielsen) on CodePen.0

For more about the CSS skewX() function, see:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewX

For more information about HTML entities, see:
https://www.w3schools.com/html/html_entities.asp