梯形跨度与CSS

Question

有没有什么方法可以在其中绘制带有文字的梯形图？无论角落是否圆润都没关系，事实上，如果是的话，我会更喜欢它。 I know how to make an oval/circle with border-radius，但我被困在梯形上。求救！

Answer 1

我使用支持pseudo-elements的{​​{1}}和skew css属性做了纯css：demo on dabblet.com
http://img135.imageshack.us/img135/9683/eedea21cb3bc438fb33c80c.png

html： border-radius 的的CSS：

<span>Trapezium</span>

UPD： demo without pseudo-elements

Answer 2

使用此css代码

span {display:block;
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}

Answer 3

我做过一次，认为是这样的：

http://jsbin.com/ebejip/