垂直に積み重ねられた 3 つの div の CSS レイアウトを試みています。上下の div が傾いています。本体は水平で、ロードされるコンテンツに合わせてサイズが変動することを意図しています。IE 9 を除くすべての最新のブラウザーでこれを機能させることができました。灰色の線をカバーするために div をオーバーラップさせようとしました。それはうまくいきますが、私は不透明度を扱っているので、div が重なっている場所が暗くなり、それも同様に悪いことです。助けていただければ幸いです。
この線：
サンプルコード:
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 200px;
left: 300px;
height: 200px;
position: relative;
background-color: rgba( 0, 26, 159, 0.7)
}
#top{
transform: skew(8deg, 0deg);
-ms-transform: skew(-8deg, 0deg);
left: 314px;
}
#bottom{
transform: skew(8deg, 0deg);
-ms-transform: skew(-8deg, 0deg);
left: 286px;
}
#middle{
height: auto;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="middle">
Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />
Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />T
</div>
<div id="bottom"></div>
</body>
</html>