Skew Örneği Yapmak

Rufiq Cavadov · 16 Şubat 2018

Merhabalar. CSS ile resimde header ve footer kısmında gördüğünüz skew örneğini nasıl yapabilirim ?

Marigold · 2 Mayıs 2018

Kod bloğundaki gibi clip-path ifadesini kullanarak resimdeki görüntüyü oluşturabilirsiniz. Yalnız ben acele ettiğimden kodlar biraz kirli duruyor, ama daha temizi yapılabilir. Ayrıca Clippy — CSS clip-path maker sitesinden istediğiniz şekilleri kolayca oluşturabilirsiniz.

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .Skew-1{
            width:30%;
            height:196px;
            background:#ff5b5b;
            position:absolute;
            -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%);
            clip-path: polygon(0 0, 0 100%, 100% 100%);
            z-index:1;
        }
        .Skew-2{
            width:100%;
            height:196px;
            background:#3e4e6c;
            position:absolute;
            -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
            clip-path: polygon(100% 0, 0 100%, 100% 100%);
        }
    </style>
</head>
<body>
    <div>
        <div class="Skew-1"></div>
        <div class="Skew-2"></div>
    </div>
</body>
</html>

a

Marigold · 2 Mayıs 2018

Kod bloğundaki gibi clip-path ifadesini kullanarak resimdeki görüntüyü oluşturabilirsiniz. Yalnız ben acele ettiğimden kodlar biraz kirli duruyor, ama daha temizi yapılabilir. Ayrıca Clippy — CSS clip-path maker sitesinden istediğiniz şekilleri kolayca oluşturabilirsiniz.

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .Skew-1{
            width:30%;
            height:196px;
            background:#ff5b5b;
            position:absolute;
            -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%);
            clip-path: polygon(0 0, 0 100%, 100% 100%);
            z-index:1;
        }
        .Skew-2{
            width:100%;
            height:196px;
            background:#3e4e6c;
            position:absolute;
            -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
            clip-path: polygon(100% 0, 0 100%, 100% 100%);
        }
    </style>
</head>
<body>
    <div>
        <div class="Skew-1"></div>
        <div class="Skew-2"></div>
    </div>
</body>
</html>

a

Skew Örneği Yapmak

Ayrıntılı düzenleme

Rufiq Cavadov

Kilopat

Marigold

Marigold

Ziyaretçi

Benzer konular