宽度不同时的CSS倒梯形

Question

我需要制作下面的形状，其中将包含一些文本。有时文本会更长，有时会更短，因此我可以使用任何固定宽度。

**********
 *      *
  ******

这是我拥有的代码 - 我想知道是否有一种方法可以将图像标记到跨度的开头和结尾。高度不会改变，因此就跨浏览器解决方案而言，这可能是最好的...

<div class="trapizium_holder">
    <span id="trapizium"></span>
</div>

Answer 1

只需要一个包装器(IE8+)

This fiddle证明只需要一个包装器。它使用单个伪元素来获取 Angular 。包装器必须是 float 的或内联 block 。这是代码:

HTML

<div class="trapizium">
   Test text
</div>

CSS

.trapizium {
    position: relative;
    float: left; /* wrap the text */
    clear: left; /* for demo */
    margin: 10px 20px; /* left/right margin will be diagonal width */
    /* needs some set height */
    font-size: 1em;
    line-height: 1em;
    padding: .2em 0;
    background-color: cyan;
}

.trapizium:before {
    content: '';
    height: 0;
    width: 100%;
    position: absolute;
    top: 0;
    left: -20px; /* stick out into margined area */
    z-index: -1; /* make it the background */
    border: 20px solid transparent; /* left/right diagonals */
    border-top: 1.4em solid cyan;
    border-bottom: 0px solid transparent;
}