Div zakończony falbanką

Question

Witam. Chciałbym uzyskać efekt diva w jakimś kolorze, który na granicy z kolejnym divem zakończony jest czymś w rodzaju falbanki. Podobny efekt wielokrotnie występuje na tej stronie. Możliwe jest osiągnięcie tego bez używania obrazków? 

Answer 1

Make some waves!  (svg - html) 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#5000ca" fill-opacity="1" d="M0,160L7.7,181.3C15.5,203,31,245,46,218.7C61.9,192,77,96,93,80C108.4,64,124,128,139,144C154.8,160,170,128,186,117.3C201.3,107,217,117,232,122.7C247.7,128,263,128,279,144C294.2,160,310,192,325,202.7C340.6,213,356,203,372,176C387.1,149,403,107,418,106.7C433.5,107,449,149,465,165.3C480,181,495,171,511,181.3C526.5,192,542,224,557,229.3C572.9,235,588,213,604,176C619.4,139,635,85,650,80C665.8,75,681,117,697,117.3C712.3,117,728,75,743,74.7C758.7,75,774,117,790,117.3C805.2,117,821,75,836,85.3C851.6,96,867,160,883,160C898.1,160,914,96,929,96C944.5,96,960,160,975,202.7C991,245,1006,267,1022,266.7C1037.4,267,1053,245,1068,224C1083.9,203,1099,181,1115,160C1130.3,139,1146,117,1161,144C1176.8,171,1192,245,1208,277.3C1223.2,309,1239,299,1254,266.7C1269.7,235,1285,181,1301,181.3C1316.1,181,1332,235,1347,213.3C1362.6,192,1378,96,1394,85.3C1409,75,1425,149,1432,186.7L1440,224L1440,320L1432.3,320C1424.5,320,1409,320,1394,320C1378.1,320,1363,320,1347,320C1331.6,320,1316,320,1301,320C1285.2,320,1270,320,1254,320C1238.7,320,1223,320,1208,320C1192.3,320,1177,320,1161,320C1145.8,320,1130,320,1115,320C1099.4,320,1084,320,1068,320C1052.9,320,1037,320,1022,320C1006.5,320,991,320,975,320C960,320,945,320,929,320C913.5,320,898,320,883,320C867.1,320,852,320,836,320C820.6,320,805,320,790,320C774.2,320,759,320,743,320C727.7,320,712,320,697,320C681.3,320,666,320,650,320C634.8,320,619,320,604,320C588.4,320,573,320,557,320C541.9,320,526,320,511,320C495.5,320,480,320,465,320C449,320,434,320,418,320C402.6,320,387,320,372,320C356.1,320,341,320,325,320C309.7,320,294,320,279,320C263.2,320,248,320,232,320C216.8,320,201,320,186,320C170.3,320,155,320,139,320C123.9,320,108,320,93,320C77.4,320,62,320,46,320C31,320,15,320,8,320L0,320Z"></path></svg>

 

P.S.  A Trick That Makes Drawing SVG Lines Way Easier

Comments

Dzięki za odpowiedź

---

@VBService,
Super

Answer 2

Witam, oczywiście, że tak. Na szybko

<div class="wavy-line small"></div>
<div class="wavy-line big"></div>
<div class="wavy-line medium"></div>

@mixin make-wavy-line($size, $thickness, $color) {
    $spacing: $size / 1.41421;
    $color-begin: $spacing - $thickness / 2;
    $color-end: $spacing + $thickness / 2;
    
    height: $size;
    background:
        linear-gradient(45deg,
            transparent $color-begin,
            $color $color-begin,
            $color $color-end,
            transparent $color-end
        ),
        linear-gradient(135deg,
            transparent $color-begin,
            $color $color-begin,
            $color $color-end,
            transparent $color-end
        ) $size 0;
    background-size: $size * 2 $size;
}

.small {
    @include make-wavy-line(10px, 1px, #F89406);
}

.big {
    @include make-wavy-line(50px, 20px, #E4F1FE);
}

.medium {
    @include make-wavy-line(30px, 5px, #F62459);
}

body {
    background: #22313F;
}

.wavy-line {
    margin: 70px 0;
}

 

Comments

Dzięki za odpowiedź