투명도가 겹치지 않고 기울어 진 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; 
} 

이 코드를 시도하고 UR .angle {폭 : 70 %}합니다이 demo

같은 링크에서

솔루션