台形を逆にするにはどうすればいいですか？

Question

私はCSSでの台形形状をしましたが、問題は、私はまた、国境の反対を回し台形の同じ種類を必要とすることで、最初の台形のCSSは次のようなものです：

#trapezoid1 { 
    height: 0; 
width: 350px; 
border-bottom: 190px solid rgb(2, 145, 178); 
border-left: 45px solid transparent; 
border-right: 45px solid transparent; 
padding: 0 8px 0 0; 
display:block; 
position:relative; 
} 

しかし、私はまた、必要border-bottomをborder-topにする第2の台形を含むが、その場合、テキストは実際の台形から飛び出している。

border-bottomの代わりにborder-topを実行して台形を反対にします。

HTML（trap2のテキストの周囲にspanタグを追加）

<div id="trapezoid1"> 
    Designing Something 
</div> 
<br/> 
<div id="trapezoid2"> 
    <span id="trap2-text">Designing Opposite</span><!-- NEW --> 
    <!-- I need the text in proper place which currently isn't --> 
</div> 

CSS（1を追加します。ここでは

は、問題の完全な表示はこのことについてどのように.. jsfiddle

Answer 1

あなたの最善の選択肢は、擬似要素を使用して、テキスト要素に絶対位置付けを使用する必要はありません。

:beforeと:afterの両方を使用すると、目的のシェイプを作成するのに役立ちます。ボーダーも透明なので、背景画像が色づけされる心配がありません。

#trapezoid { 
 
    width: 260px; 
 
    height: 190px; 
 
    background: red; 
 
    margin-left: 45px; 
 
    position: relative; 
 
} 
 
#trapezoid:before { 
 
    content: ''; 
 
    border-right: 45px solid red; 
 
    border-bottom: 190px solid transparent; 
 
    position: absolute; 
 
    left: -45px; 
 
    top: 0; 
 
} 
 
#trapezoid:after { 
 
    content: ''; 
 
    border-left: 45px solid red; 
 
    border-bottom: 190px solid transparent; 
 
    position: absolute; 
 
    right: -45px; 
 
    top: 0; 
 
}

<div id="trapezoid"> 
 
    Text in here 
 
</div>

また、CSSの台形を作成するためのさまざまな可能な方法の全てに優れた概要を与える私のプレビュー回答のいずれかを参照することができます。

• Responsive CSS Trapezoid Shape

Answer 2

ですルール）

#trap2-text { 
    position: absolute; 
    top: -190px; 
    left: -25px; 
} 

DEMO

Answer 3

私は一般的に純粋なCSSの形状を好むが、私はあなたのフィドルの周りいじる始めてSVGはこのケースではあなたの人生を容易にするかもしれないと思いました。私は結果に完全には満足していませんが、動的なサイズのような利点があります。コメントを

フィドル：http://jsfiddle.net/bo5k36pa/8/

あなたはこのソリューションを使用したい場合は、私は非常にcompabilityとエンコーディングの問題を回避するために、BASE64であなたのインラインsvgsをエンコードをお勧めします。詳細については、this answerを参照してください。

説明

アイデアは、それが任意のサイズのコンテナに伸びるであろうように、背景画像としてインラインSVGを使用することでした。

background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 2" preserveAspectRatio="none"><path style="fill: rgb(2, 145, 178);" d="M 0.5 0 L 3.5 0 L 4 2 L 0 2 Z" /></svg>'); 
background-size: 100%; 

trapezを構成するパスは、異なる角度又は形状が必要な場合、それもJavaScriptを使用して動的に生成することができ、修正することができます。しかし、ここで本当に酷いのは、インラインSVGの背景イメージをスタイルできないということです。たとえば、塗りつぶしの色を変更するなど、svgマークアップ全体を再度定義する必要があります。

可能な解決策は、複数のインラインsvgs

1. 使用<use>を避けるために。外側のsvgファイルに<symbols>を定義し、id属性を使用してインライン<svg>でそれらを参照することができます。 CSSを使用してこれらのシンボルのスタイルを変更することもできます。ただし、すべてのコンテナにかなりの量の余分なマークアップが必要です。このようなもの： <svg viewBox="0 0 4 2" role="img" title="Trapez"><use xlink:href="path/to/images/shapes.svg#trapez"></use></svg>

2. CSSフィルタを使用して外観を変更します。Example fiddle/Browser Support

3. CSSシェイプに戻るbeforeと：after擬似要素を利用して、このような魅力的な付属物をコンテンツボックスから少し離れたものに保つことをお勧めします。