使用CSS实现梯形跨度

Question

有没有办法我可以绘制一个带有文本的梯形跨度？不管角落是否圆润，事实上，如果它们是圆润的，我更喜欢。 我知道如何用border-radius制作椭圆/圆形，但是我卡在了梯形上。请帮帮我！

- Bluefire

Answer 1

我使用纯CSS和伪元素，以及倾斜的CSS属性来创建这个效果，并支持border-radius：在dabblet.com上演示
http://img135.imageshack.us/img135/9683/eedea21cb3bc438fb33c80c.png HTML：<span>梯形</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;
}

更新：不使用伪元素的演示

（译注：此处是一个标题，内容为更新某个演示链接。）

- Vladimir Starkov

---

只是问一下，我知道我应该避免这样做，但有没有办法内联实现（所以不使用伪类）？ - Bluefire

@Bluefire，“inline”是指内联样式吗？内联样式不会影响:before和:after。伪元素在示例中使用，而伪类（如:hover、:active、:not等）也是如此。 - Vladimir Starkov

如果您将伪元素更改为内部div（一个用于:before，另一个用于:after），并从伪元素样式中应用适当的样式，则可以使用“内联CSS”。您理解我的解释（我的英语可能很差），还是最好展示一个例子？ - Vladimir Starkov

我有点明白了，你的英语很好（我也是俄罗斯人:D），但是因为我知道自己，我可能会弄错什么，所以如果可以的话，一个例子会很棒！ - Bluefire

我在回答中添加了没有伪元素的演示。你自己可以简单地应用内联样式，它就会对你起作用。 - Vladimir Starkov

Answer 2

我曾经做过一次，记得大概是这样的：

http://jsbin.com/ebejip/

- Crinsane

Answer 3

请使用以下 CSS 代码。

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

- user1432124