Skośny gradient

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<br><br><br><br><br>
<div class="row">
    <div class="container-fluid">
        <div class="bg-gradient-green"></div>
        <div class="bg-green">
            <div class="container">
                <h1>Lorem ipsum dolor sit amet.</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur eaque quos nihil sint dolores at voluptatem cumque unde illo mollitia, tempora ea ut. Aliquam cumque voluptatem sed magnam deleniti tenetur vero odit dicta rem quis? Quae sunt veritatis iusto, officia sequi beatae eum quisquam error veniam rerum quis, asperiores aspernatur ducimus quo eligendi recusandae autem ratione facere adipisci ipsam. Enim at quae architecto et ipsum temporibus dolorum nisi qui minima doloribus aspernatur nobis explicabo voluptatibus fuga, nam a, consectetur fugit possimus est! Ratione est voluptates tempora, quos ducimus quo consequuntur pariatur dolore minus eveniet. Facere magni, delectus incidunt explicabo quibusdam placeat quia necessitatibus eveniet tempore harum architecto suscipit voluptas ullam nemo in totam exercitationem! Quia cupiditate fugiat soluta, dolor qui sunt, nobis pariatur veniam saepe exercitationem, blanditiis! Aliquid incidunt at quod optio, vel! Iure sunt, sapiente sint tempore voluptatibus fugiat earum, blanditiis veritatis. Deserunt perferendis, iure aperiam ex eum nemo. Perferendis ad itaque inventore molestiae blanditiis. Sunt esse impedit illum. Minima veniam deserunt, facilis facere enim. Obcaecati quia, libero ducimus enim cupiditate mollitia, deserunt alias quas, voluptatum commodi deleniti culpa eveniet. Voluptatibus pariatur esse laboriosam, hic quod recusandae dolorum porro, placeat. Est a adipisci quisquam atque incidunt in ipsa, tempore?</p>
            </div>
        </div>
            <div class="bg-gradient-orange"></div>
    </div>
</div>
<style type="text/css">
.bg-gradient-green {
    margin-top: -125px;
    height: 240px;
    background: #40b55c;
    background: -webkit-repeating-linear-gradient(277deg, transparent, transparent 49.9%, #40b55c 50.1%, #40b55c 100%);
    background: -o-repeating-linear-gradient(277deg, transparent, transparent 49.9%, #40b55c 50.1%, #40b55c 100%);
    background: repeating-linear-gradient(173deg, transparent, transparent 49.9%, #40b55c 50.1%, #40b55c 100%);
}

.bg-green {
    padding: 0 0 15px 0;
    background: #40b55c;
}
.bg-gradient-orange {
    height: 196px;
    background: -webkit-repeating-linear-gradient(94deg, transparent, transparent 49.9%, #ffcc32 50.1%, #ffcc32 100%);
    background: -o-repeating-linear-gradient(94deg, transparent, transparent 49.9%, #ffcc32 50.1%, #ffcc32 100%);
    background: repeating-linear-gradient(-4deg, transparent, transparent 49.9%, #ffcc32 50.1%, #ffcc32 100%);
}
</style>
</body>
</html>

LINK

Komentarze wyłączone