CSS倒梯形的宽度会有所不同 [英] CSS inverted trapezium when width will differ

问题描述

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

I need to make the shape below, which will contain some text. Sometimes the text will be longer, sometimes shorter so I can use any fixed widths.

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

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

This the is code I have - I'm wondering if there's a way I can tag an image on to the beginning and the end of the span. The height won't change so that would probably be the best in terms of cross browser solutions...

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

推荐答案

只需要一个包装(IE8 +)

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

One Wrapper Only Needed (IE8+)

This fiddle demonstrates that only a single wrapper is needed. It uses a single pseudo-element to get the angles. The wrapper must either be floated or an inline-block. Here's the code:

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

这篇关于CSS倒梯形的宽度会有所不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！