Question

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

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

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

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

Answer 1

仅需一个包装（IE8 +）

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

<强> 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

Fiddle

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

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

CSS倒梯形时宽度会有所不同

2 个答案:

仅需一个包装（IE8 +）