0
我正在嘗試一個垂直堆疊的三個div的CSS佈局。頂部和底部的div是傾斜的。身體是水平的並且意味着隨着加載的內容大小波動。我已經能夠在除IE 9以外的所有現代瀏覽器中工作。我試圖重疊div以覆蓋灰線。這是有效的，但由於我在使用不透明度，因此divs會在它們重疊的地方變暗，這同樣糟糕。將不勝感激任何幫助。CSS斜度在IE9中創建灰線
線： 
示例代碼：
<!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>