Saf CSS Şekilleri 3 Yol

Modern CSS – ve modern tarayıcı desteği – bize saf, temel CSS şekilleri oluşturmak için üç mükemmel yöntem sunar. Bu eğitimde, aşağıdakileri kullanarak CSS üçgenlerinin nasıl oluşturulacağını inceleyeceğiz:

• sınırlar
• doğrusal gradyanlar
• clip-path

Bu, CSS üçgenleri oluşturmayı öğrendiğim ilk numara ve hala sağlam bir bekleme.

Sıfır genişlik ve sıfır yükseklik öğesi verildiğinde, sağlanan tüm değerler border doğrudan kesişir ve bir öğenin tek görünür göstergesidir. Bu kesişim, bir üçgen şekli oluşturmak için yararlanabileceğimiz şeydir.

Bunun nasıl çalıştığını göstermek için her iki tarafa da farklı bir kenarlık rengi sağlayacağız:

.triangle {
border: 10px solid blue;
border-right-color: red;
border-bottom-color: black;
border-left-color: green;
}

Bu, aşağıdakileri üretir, görebileceğiniz gibi, zaten 4 üçgen şekli elde ettik:

Bunun yerine tek bir üçgen oluşturabilmek için önce üçgenin hangi yönü göstermesini istediğimize karar veriyoruz. Bu nedenle, “oynat” simgesine benzer şekilde sağa işaret etmesini istiyorsak, sol kenarlığı görünür tutmak istiyoruz. Ardından, diğer bordürlerin renklerini transparentşöyle:

.triangle {
border: 10px solid transparent;
border-left-color: blue;
}

Aşağıdaki demo görüntüsünde kırmızı ekledim outline bazı iyileştirmeleri tartışabilmemiz için sınırlayıcı kutuyu görmek için.

Yapabileceğimiz bir iyileştirme, öğenin toplam genişliğine dahil edilmesini önlemek için sağ kenarlığın genişliğini kaldırmaktır. Üçgen görselini uzatmak için üst ve alt için benzersiz değerler de ayarlayabiliriz. İşte bu sonuçları elde etmenin kompakt bir yolu:

.triangle {
border-style: solid;
border-color: transparent;
border-width: 7px 0 7px 10px;
border-left-color: blue;
}

Aşağıdaki güncellenmiş görselde de görüldüğü gibi önce düz, şeffaf bir border atadık. Ardından, en boy oranını ayarlamak ve uzun bir üçgen oluşturmak için üst ve alt soldan daha küçük bir değer olacak şekilde genişlikleri tanımlarız.

Böylece üçgeni yukarı gibi farklı bir yöne yönlendirmek için değerleri karıştırırız. alt kenarlık renk değerini kazanır ve tepe sınır sıfıra ayarlandı:

.triangle {
border-style: solid;
border-color: transparent;
border-width: 0 7px 10px 7px;
border-bottom-color: blue;
}

Sonuçlanan:

Kenarlıklar üçgenler için çok etkilidir, ancak daha fazla öğe dahil edilmeden bu şeklin ötesine genişletilemez. Sonraki iki yöntemimizin kurtarmaya geldiği yer burasıdır.

CSS gradyanları şu şekilde oluşturulur: background-image değerler.

İlk önce kutu ölçülerini tanımlayarak ve engelleyerek sahnemizi oluşturalım. background-repeat:

.triangle {
width: 8em;
height: 10em;
background-repeat: no-repeat;
outline: 1px solid red;
}

Bunu takiben, ilk gradyanımızı ekleyeceğiz. Bu, mavi ve saydam bir değer arasında %50’de bir sabit durdurma oluşturduğumuz için, öğemizin yarısının mavi renklendirilmesi görünümünü yaratacaktır.

background-image: linear-gradient(45deg, blue 50%, rgba(255, 255, 255, 0) 50%);

Şimdi, elemanımız kare olsaydı, bu köşeden köşeye kesilmiş gibi görünürdü, ancak sonuçta daha önce yaptığımız gibi biraz farklı bir en-boy oranı istiyoruz.

Amacımız, kenarlık yöntemimizi kullanırken aynı görünüme sahip bir üçgen oluşturmaktır. Bunu yapmak için, ayarlamamız gerekecek background-size ve background-position değerler.

İlk ayar, değiştirmektir. background-size. Kısaca, ilk değer genişlik ve ikinci yüksekliktir. Üçgenimizin genişliğinin %100’üne, ancak yüksekliğinin yalnızca %50’sine izin verilmesini istiyoruz, bu nedenle aşağıdakileri ekleyin:

background-size: 100% 50%;

bizim önceki ile linear-gradient değişmez, sonuç şudur:

nedeniyle 45deg eğim açısı, şekil biraz garip görünüyor. Açıyı, üçgenin üst tarafı sınırlayıcı kutunun sol üst köşesinden sağ tarafının ortasına kesecek şekilde ayarlamamız gerekiyor.

Ben bir matematik sihirbazı değilim, bu yüzden doğru değeri bulmak için DevTools’u kullanarak biraz deneme yaptım 😉

Güncelle linear-gradient aşağıdakilere değer:

linear-gradient(32deg, blue 50%, rgba(255,255,255,0) 50%);

Ve işte ilerlememiz – teknik olarak bir üçgen olsa da, istediğimiz tam görünüm değil:

Sınır numarası için, şekilleri oluşturmak için kesişme noktasına güvenmek zorundaydık. linear-gradient efektleri katmanlamak ve tam üçgenimizi elde etmek için birden fazla arka plan ekleme yeteneğinden yararlanmalıyız.

Yani, bizim kopyalayacağız linear-gradient ve derece değerini birincinin ayna şekli olacak şekilde güncelleyin, çünkü onun altına yerleştirilecektir. Bu, tam olarak aşağıdakilerle sonuçlanır background-image tanım:

background-image: linear-gradient(32deg, blue 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(148deg, blue
50%, rgba(255, 255, 255, 0) 50%);

Ancak – ilerleme görüntüsünde görülebileceği gibi, efekti hala tam olarak tamamlamadık:

Örtüşmenin nedeni, her iki degradenin varsayılan konumunun 0 0 – diğer adıyla top left. Bu, orijinal gradyanımız için iyi, ancak ikincisini ayarlamamız gerekiyor.

Bunu yapmak için, üzerinde birden fazla değer ayarlamamız gerekir. background-position. Bunlar aynı sırayla gider background-image:

background-position: top left, bottom left;

Ve şimdi istediğimiz sonucu aldık:

Bu yöntemin dezavantajı, dereceleri yeniden hesaplamadan en boy oranını değiştirme konusunda oldukça esnek olmamasıdır.

Bununla birlikte, CSS gradyanları, özellikle efektler oluşturmak için katmanlı olmaları nedeniyle daha fazla şekil oluşturmak için kullanılabilir.

Şekiller ve tam çizimler için CSS gradyanlarında bir ana sınıf için göz atın Tek Bir Div Lynn Fisher tarafından

Bu son yöntem, en ince ve en ölçeklenebilir yöntemdir. şu anda destekte biraz geride bu nedenle, bunun kabul edilebilir bir çözüm olup olmadığını belirlemek için kendi analizlerimizi kontrol ettiğinizden emin olun.

İşte kutu boyutları ve bir background-color:

.triangle {
width: 16px;
height: 20px;
background-color: blue;
}

kavramı clip-path bunu bir çokgen şekli (veya daire veya elips) çizmek ve öğenin içine yerleştirmek için kullanmanızdır. dışındaki herhangi bir alan clip-path tarayıcı tarafından etkin bir şekilde çizilmez, bu nedenle görünümü yalnızca sınırlarına “kırpır”. clip-path.

Bunu daha fazla göstermek ve istediğinizi oluşturmak için clip-path tanım, çevrimiçi oluşturucuya göz atın: klişe

Sözdizimine alışmak biraz daha zor olabilir, bu yüzden kesinlikle yolunuzu oluşturmak için yukarıda belirtilen oluşturucuyu kullanmanızı öneririm.

Bizim amacımız için, sağı gösteren bir üçgen var:

clip-path: polygon(0 0, 0% 100%, 100% 50%);

Birlikte clip-path, yol boyunca yerleştirdiğiniz her nokta için koordinatlar tanımlıyorsunuz. Yani bu durumda, sol üstte bir noktamız var (0 0), sol alt (0% 100%) ve sağ merkez (100% 50%).

Ve işte sonucumuz:

Süre clip-path birçok şekil için çok esnektir ve ayrıca herhangi bir sınırlayıcı kutuya veya en boy oranına uyum sağlaması nedeniyle en ölçeklenebilirdir, bazı uyarılar vardır.

Tarayıcının sınırlayıcı kutunun dışına hiçbir şey çizmediğinden bahsettiğimde, buna sınırlar da dahildir, box-shadowve outline. Bu şeyler kırpılan şekle uyacak şekilde yeniden çizilmez. Bu bir sorun olabilir ve kayıp etkileri değiştirmek için ek öğeler veya efektlerin bir ebeveyne taşınmasını gerektirebilir.

işte Colby Fayock’tan bir yumurta kafalı video Daha iyi anlamak clip-path ve efektler nasıl geri getirilir box-shadow

Bu demo, kullanarak her öğeye eklenen bir CSS üçgeni oluşturmanın üç yolunu gösterir. ::after ve duyarlı olmak için görünüm birimi birimlerini kullanır.

Stephanie Eckles (@5t3ph)