如何制作没有透明度重叠的倾斜css背景？

Question

我有一个网站，我正在设计为一个页面，其中包含多个部分，并且背景略微透明。在我的设计中，其中一个部分斜着走，以显示下面的背景。因为每次我尝试制作旋转背景时它们都是透明的，所以它重叠并且看起来很粗糙。所以我想我可以做一个边框并以某种方式去掉一个角，这样它就可以正确倾斜而不接触其他部分，但我不能让它正确倾斜。

http://jsfiddle.net/c9P8Q/3/

HTML：

<div class="page2">
   <div class="angle">
       border here
   </div> 
   <div class="floated-content">
       <p>floating content, Lorem ipsum whatever</p>
   </div>
</div>

CSS：

.angle {
    position: relative;
    width: 100%;
    height: 0px;
    border-top: 1px solid rgba(0, 255, 0, 0.9);
    border-bottom: 40px solid rgba(0, 255, 0, 0.9);
}

理想情况下，我需要将斜度放在 .angle 类中。但我不知道该怎么做。任何帮助都非常感谢x

---

编辑：

此链接中的解决方案：http://jsfiddle.net/qHAK7/2/

Answer 1

    .angle:after { width: 0;
height: 0;
content: "";
border-top: 41px solid #3498db;
border-right: 36px solid transparent;
position: absolute;
right: -36px;
top: -1px;
}

试试这段代码，让你的 .angle{width:70%} 像这样demo