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

Question

我有一个网站，我正在将其设计为一个页面，其中包含多个部分，这些部分的背景略微透明。在我的设计中，其中一个部分沿对 Angular 线逐渐消失，以显示下面的背景。因为每次我尝试制作旋转背景时它们都是透明的，所以它会重叠并且看起来很粗糙。所以我想我可以制作一个边框并以某种方式摆脱其中一个 Angular ，以便它在不接触其他部分的情况下正确倾斜，但我无法使其正确倾斜。

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