html - Trapezium span with CSS -
is there way draw trapezium span thing text in it? doesn't matter if corners rounded, in fact, i'd prefer if were. i know how make oval/circle border-radius , i'm stuck on trapezium. please! i did pure css using pseudo-elements , skew css property support border-radius : demo on dabblet.com http://img135.imageshack.us/img135/9683/eedea21cb3bc438fb33c80c.png html: <span>trapezium</span> css: span { display: block; z-index: 1; position: relative; /* custom sizes */ width: 200px; height: 50px; } span:before, span:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; bottom: 0; z-index: -1; } span:before { transform: skew(25deg); left: 25px; } span:after { transform: skew(-25deg); right: 25px; left: auto; } upd: demo without pseudo-elements