css - 柔軟なCSS三角形？

Question

ブロックの側面に三角形を追加して、ブロックをそのように矢印に成形したいと思います。ただし、柔軟性があり、さまざまな長さのテキストに適応する必要があります。従来のcss-triangles-made-from-borders手法は機能しないと思いますが、これまでのところ、これですべてです（デモ）。他の誰かがより堅牢なソリューションを持っていますか？

最先端のcssは、劣化がうまくいく限り問題ありません。

Answer 1

最適な互換性ソリューションはhttp://dabblet.com/gist/3184227だと思います

疑似要素とCSSのみを使用しますtransform（ IE9で機能し、行列filterを使用して疑似要素を歪めることができるIE8に適合させることができます-それが実際に機能するかどうかを確認したことはありません...私は知っているだけですその勾配フィルターは疑似要素では機能しません）。

考え方は非常に単純です。2つの疑似要素を使用します。それぞれが半分を持ちheight、絶対positionにそれらを持ち、1つは上半分を占め、もう1つは下半分を占め、最後skewに反対方向になります。

HTML：

<div class="t">
    <p>Add text to see how it scales</p>
</div>

関連するCSS：

.t {
    position: relative;
}
.t:before, 
.t:after {
    left: 0;
    right: 0;
    position: absolute;
    z-index: -1;
    content: '';
}
.t:before {
    top: 0;
    bottom: 50%;
    transform: skewX(10deg);
}
.t:after {
    top: 50%;
    bottom: 0;
    transform: skewX(-10deg);
}

CSSだけを使用して、疑似要素なしで実行できますgradients。残念ながら、IE9はそれらをサポートしていません。