JSFiddle - React, Tailwind, and code Playground

by CBroe

HTML

<div>English Deutsch Español Français Italiano 日本語 Polski Português Русский Svenska Türkçe 简体中文</div>
<div>English Deutsch Español Français Italiano 日本語 Polski Português Русский Svenska Türkçe 简体中文</div>

CSS

ul { margin:1em; padding:0; font-size:2em; }
li { display:inline-block; margin:.5em 1em; }
a { display:block; position: relative; padding:.25em .5em; line-height:1.5; color:#330; background:#f90; xtransform:skewX(-12deg); }
#tl1 a::before, #tl1 a::after { content:""; position:absolute; top:0; border:solid; border-width:1em .25em; }
#tl1 a::before { left:-.5em; border-color:#f90 #f90 transparent transparent; }
#tl1 a::after { right:-.5em; border-color:transparent transparent #f90 #f90; }
#tl2 a { background:none; }
#tl2 a::after { content:""; position:absolute; top:0; bottom:0; left:-.25em; right:-.25em; background:#f90; z-index:-1; transform:skewX(-12deg); transition:transform .25s; }
#tl2 a:hover::after { transform:skewX(12deg); }

JavaScript

var d = document.querySelectorAll('div');

d[0].outerHTML = '<ul id="tl1"><li><a href="#">'+d[0].innerHTML.replace(/ /g, '<\/a><\/li><li><a href="#">')+'<\/a><\/li><\/ul>';

d[1].outerHTML = '<ul id="tl2"><li><a href="#">'+d[1].innerHTML.replace(/ /g, '<\/a><\/li><li><a href="#">')+'<\/a><\/li><\/ul>';