3

以下の形状を作成する必要があります。これにはテキストが含まれます。テキストが長くなることもあれば、短くなることもあるので、任意の固定幅を使用できます。

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

これは私が持っているコードです-スパンの最初と最後に画像をタグ付けする方法があるかどうか疑問に思っています。高さは変わらないので、クロスブラウザソリューションの観点からはおそらく最高でしょう...

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

2 に答える 2

5

必要なラッパーは1つだけ（IE8 +）

このフィドルは、必要なラッパーが1つだけであることを示しています。単一の疑似要素を使用して角度を取得します。ラッパーは、フロートまたはインラインブロックのいずれかである必要があります。コードは次のとおりです。

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;
}
于 2013-02-19T19:04:57.593 に答える
1

フィドル

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

テキストを図形に絶対的に配置する必要がある場合があります。これは、境界線を使用して形状を作成し、高さはありません。

于 2013-02-19T18:26:32.310 に答える