css - 宽度不同时的CSS倒梯形

Question

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

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

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

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

Answer 1

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

这个小提琴表明只需要一个包装器。它使用单个伪元素来获取角度。包装器必须是浮动的或内联块。这是代码：

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;
}

Answer 2

小提琴

#trapizium {
    border-top: 100px solid blue;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}

您可能必须将文本绝对定位到您的形状中。这使用边框来制作形状，并且没有高度。