Оформете наклонена долна граница на div

Създавам прост уебсайт и на неговата целева страница имам нужда от два фона. За това използвам два div, един върху друг. Дотук добре.

Проблемът е, че искам долната граница на първия div (или горната граница на втория) да е наклонена. Това е скица на това, което искам да направя:

Скица

Оформление, което трябва да следвам

Някаква идея как да се постигне това?

Намерих тази статия, но тя работи само с плаващи елементи и изобщо не изглежда стабилна.

http://sarasoueidan.com/blog/css-shapes/

Благодаря предварително!

html:

div class="main-container" id="main-container1">
    //all kinds of stuff
</div>

<div class="main-container" id="main-container2">
      //all kinds of stuff
</div>

css:

#main-container1{
    background: url(../img/background1.jpg);
    background-position:center;


}

#main-container2{
    background: url(../img/background2.jpg);
    background-position:center;


}

html css css-shapes
person biip    schedule 01.06.2014    source източник
comment
моля, предоставете кода, който имате досега. Също така CSS Shapes (статията, която сте свързали) все още не е внедрена.   -  person Zach Saucier    schedule 01.06.2014
comment
Трябва ли нещо да се „случи” с тези елементи, респ. техните фонове – като всякакъв вид ефекти на превъртане, динамични размери или каквото и да било? Или да го формулираме по друг начин, какво ви пречи да използвате „лесното“ решение просто тази „наклонена“ граница да бъде просто част от фоновото изображение на самия втори div, като го направите да има триъгълна прозрачна част …?   -  person CBroe    schedule 01.06.2014
comment
вторият фон трябва да е модел, така че ще трябва да го модифицирам, за да се справи с вашето решение. но това е идея. Ще трябва леко да променя йерархията на div, нали?   -  person biip    schedule 01.06.2014
comment
защо не можете да комбинирате 2 фонови изображения в 1 изображение?   -  person Chris L    schedule 01.06.2014

Отговори (2)


arrow_upward
2
arrow_downward

Не е най-добрият начин да направите това

.second {
    width:500px;
    height:300px;
    transform:skewY(20deg);
    background:orange;
    margin-top:-100px;
    border:2px solid green;
}

.holder{
    width:500px;
    height:800px;
    background:grey;
}

.second p{
    position:absolute;
    margin-top:200px;
    transform:skewY(-20deg);
}
<div class="holder">
    <div class="second"><p>Div 1</p></div>
</div>

person Akshay    schedule 22.04.2015

arrow_upward
0
arrow_downward

ПОТРЕБЕТЕ ТУК

CSS:

.se-slope{
    background: #47650a;
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);

}

.se-slope {
    margin: 0 -50px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
}

.se-content {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
    color: #000;

   padding-top:120px;
   padding-bottom: 120px;
   margin-left: 10%;
   margin-right: 10%;

}

.above{
   background: #47650a;
   padding-bottom: 120px;
   width:100%;
}

.below
{
  background: gray;
  padding-bottom: 120px;
  margin-top: -110px;
}

HTML:

<div class="above">

 </div>
 <div class="se-slope">
        <article class="se-content">
          <p>You should use CSS TRANSFORM. That way you can do all kinds off neat stuff. Hav you tried skew allready? Or animations in JQuery build cool wepp apps. Be creative use arrows and circles...</p>
        </article>
</div>

 <div class="below">

 </div>
person user3806549    schedule 03.04.2016