Der Trick mit den schrägen Kanten…

Da probiert man herum und plötzlich hat man etwas, dass total cool aussieht. Dann sucht man im Netz und findet andere, die noch viel genialere Sachen umgesetzte haben… ;-)

Diese Beispiele basieren auf den Tutorials von Geno Quiroz. Dort findet man eine Menge mehr gute Tipps zu Divi!

Hier verschiedene Section-Seperatoren, mit denen man seine Divi Seite aufpeppen kann….

/*Schräge Kanten von Frank Oschatz */
.diagonally_below:before{
content: ”;
width: 0;
height: 0;
line-height: 0;
border-right: 2800px solid transparent;
border-top: 80px solid #000;
bottom: -80px;
right: 0;
position: absolute;
z-index: 10000;

}

.diagonally_above {
width:100%;
height: auto;
position:relative;
}
.diagonally_above:after {
content: ”;
width: 0;
height: 0;
line-height: 0;
border-left: 2800px solid transparent;
border-bottom: 80px solid #000;
bottom: 0;
right: 0;
position: absolute;
}

The Big TriangleTutorial | Demo | Quelle der Idee 
/*------------------------------------------------*/
/*------[Big Invisible Triangle - Quiroz.co]------*/
/*------------------------------------------------*/
#et-main-area { overflow: hidden;} /* Hides all the items that float over the right margin */
.big-triangle:after,.big-triangle:before {
    content:'';
    position:absolute;
    bottom:0;
    width:50%;
    z-index:100;
    border-bottom:50px solid #22262e;
    -moz-transform:rotate(0.000001deg);
    -webkit-transform:rotate(0.000001deg);
    -o-transform:rotate(0.000001deg);
    -ms-transform:rotate(0.000001deg);
    transform:rotate(0.000001deg);}
.big-triangle:before{
    right:50%;
    border-right:1000px solid transparent;
    border-left:1000px solid;}
.big-triangle:after{
    left:50%;
    border-left:1000px solid transparent;
    border-right:1000px solid;}

The Small TriangleTutorial | Demo | Quelle der Idee 
/*---------------------------------------------------*/
/*------[Little Invisible Triangle - Quiroz.co]------*/
/*---------------------------------------------------*/
#et-main-area { overflow: hidden;} /* Hides all the items that float over the right margin */
.small-triangle:after,.big-triangle:before {
    content:'';
    position:absolute;
    bottom:0;
    width:50%;
    z-index:100;
    border-bottom:50px solid #22262e;
    -moz-transform:rotate(0.000001deg);
    -webkit-transform:rotate(0.000001deg);
    -o-transform:rotate(0.000001deg);
    -ms-transform:rotate(0.000001deg);
    transform:rotate(0.000001deg);}
.small-triangle:before{
    right:50%;
    border-right:75px solid transparent;
    border-left:1000px solid;}
.small-triangle:after{
    left:50%;
    border-left:75px solid transparent;
    border-right:1000px solid;}

Diagonaler Schatten

Tutorial | Demo | Quelle der Idee

/* Diagonaler Schatten by Geno Quiroz */

.diagonal-shadow {
z-index: 1;
padding-top: 6em;
background: #2072a7;
}

.diagonal-shadow::before, .diagonal-shadow::after {
position: absolute;
content: ”;
pointer-events: none;
}

.diagonal-shadow::before, .diagonal-shadow::after {
top: 0;
left: -25%;
z-index: -1;
width: 150%;
height: 75%;
background: inherit;
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}

.diagonal-shadow::before {
height: 50%;
background: #535353;
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-transform-origin: 3% 0;
transform-origin: 3% 0;
}