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;
}

尝试使用此代码，然后像这样demo

制作.angle {width：70％}

如何在没有透明度重叠的情况下制作倾斜的CSS背景？

1 个答案: