Question

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!

Answer 1

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