Trapezium span with CSS

css, html

Solution

I did it pure css using `pseudo-elements` and `skew` css property with 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`

Problem

Is there any way I could draw a trapezium span thing with text in it? Doesn't matter if the corners are rounded, in fact, I'd prefer it if they were. I know how to make an oval/circle with border-radius, but I'm stuck on the trapezium. Help please!

Original source