Skew Örneği Yapmak

R

Rufiq Cavadov

Gigapat
Zamanın Tanığı Forumun Hafızası
Katılım
12 Eylül 2013
Mesajlar
3.725
Makaleler
3
Çözümler
10
Yer
Azərbaycan
Daha fazla  
Cinsiyet
Erkek
Merhabalar. CSS ile resimde header ve footer kısmında gördüğünüz skew örneğini nasıl yapabilirim ?

1.jpg
 
Çözüm
M
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.

Başlıksız-2.jpg


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
Tarihe göre sırala Puana göre sırala
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.

Başlıksız-2.jpg


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
 
Son düzenleyen: Moderatör:
Artı 0 Eksi
Çözüm
Uyarı! Bu konu 8 yıl önce açıldı.
Muhtemelen daha fazla tartışma gerekli değildir ki bu durumda yeni bir konu başlatmayı öneririz. Eğer yine de cevabınızın gerekli olduğunu düşünüyorsanız buna rağmen cevap verebilirsiniz.

Benzer konular

RealtimeUfuk
jQuery ve CSS Kullanarak Lightbox Yapmak
Mesaj
8
Görüntüleme
1.778
Fahri ufmak
Fahri ufmak
Beyaz atlı playboy
HTML 5 ve CSS 3'ten sonra bootstrap mı JavaScript mi öğrenilmeli?
Mesaj
7
Görüntüleme
3.063
Mavi1934
Mavi1934
R
HTML ile Haraketli Araba
Mesaj
2
Görüntüleme
4.143
Rufiq Cavadov
R
AteşliKazanova99
HTML/CSS mi yoksa PHP mi?
Mesaj
7
Görüntüleme
2.241
The User 0
The User 0
Revivmeooi
Sıfırdan HTML CSS ve JavaScript Öğrenme Tavsiyeleri
2 3
Mesaj
23
Görüntüleme
10.265
contezuma
contezuma

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı