Блог

У меня есть веб-сайт, который я проектирую как одну страницу с несколькими разделами, которые имеют слегка прозрачные фоны. В моем дизайне один из разделов заканчивается по диагонали, чтобы показать, какой фон находится под ним. Поскольку они прозрачны, каждый раз, когда я пытался сделать повернутый фон, он перекрывался и выглядел грубо. Итак, я подумал, что мог бы создать границу и как-то избавиться от одного из углов, чтобы он правильно наклонялся, не касаясь другого раздела, но я не могу заставить его правильно наклоняться.

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

В идеале мне нужно, чтобы slant просто находился внутри класса .angle. Но я не уверен, как это сделать. Любая помощь очень ценится x

Редактировать:

Решение по этой ссылке:http://jsfiddle.net/qHAK7/2 /

     .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{width: 70%} похожим на этудемонстрацию