Question

我正在尝试垂直堆叠的三个div的CSS布局。顶部和底部div是倾斜的。身体是水平的，意味着随着载入的内容而波动。我已经能够在IE 9以外的所有现代浏览器中使用它。我试图重叠div以覆盖灰线。这是有效的，但由于我正在使用不透明度，div会在重叠的地方变暗，这也差一点。非常感谢任何帮助。

该行： enter image description here

示例代码：

<!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>

Answer 1

由于IE9可以处理透明图像，因此我们生成了具有所需不透明度的图像，并使用它而不是CSS3。

CSS Skew在IE9中创建灰线

1 个答案: