HTML & CSS: How to skew an HTML entity

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:

For more information about HTML entities, see: