CSS ile Yarı Daire Nasıl Oluşturulur

HTML dosyamızın gövde etiketinin içindeki ” öğesi.

---

---

HTML

< div >< / div >

Şimdi div için uygun boyutları ayarlayın, örneğin “ Genişlik ” özellik değeri olarak “ 180 piksel ' ve ' yükseklik “değerli mülk” 90 piksel ”. Bir sonraki adımda, “ sınır yarıçapı ' mülk değeri ' 12rem 12rem 0 0 ”; ilk basamak 12rem div'in sol üst tarafını kesecek, ikinci 12rem sağ üst tarafı kesecek, üçüncü ve dördüncü basamak 0 div'in alt kısmını kesecek. Son olarak daireye renk vermek için “ arka plan rengi ” değeri olan mülk” mor ”.

CSS

div {
Genişlik : 180 piksel ;
yükseklik : 90 piksel ;
sınır yarıçapı : 12rem 12rem 0 0 ;
arka plan rengi : mor ;
}

HTML dosyasını belirtilen kodla kaydedin ve tarayıcınızda açın:

Gördüğünüz gibi CSS border-radius özelliği ile başarılı bir şekilde yarım daire oluşturduk.

Örnek 2: CSS ile Alttan Yarım Daire Oluşturun

Alttan yarım daire oluşumu için border-radius özellik değerlerini “ olarak ayarlayacağız. 0 0 12rem 12rem ”, burada ilk iki değer sol üst ve sağ üst kenar kenarlık yarıçapını temsil eder. Div'in üst yarısının tamamen kaybolması için onları 0'a ayarladık. Alt kısım için ise değerleri 12rem olarak ayarlayarak sadece alt sol ve sağ alt tarafı biraz kırptık.

CSS

div {
Genişlik : 180 piksel ;
yükseklik : 90 piksel ;
sınır yarıçapı : 0 0 12rem 12rem ;
arka plan rengi : mor ;
}

Çıktı

Örnek 3: CSS ile Sağdan Yarım Daire Oluşturun

Sağa bir CSS yarım daire yapmak için, önce, dairenin uygun şeklini elde etmek için kabın yüksekliğini ve genişliğini gerektiği gibi ayarlayın. Yı kur ' Genişlik ' olarak ' 90 piksel ' ve ' yükseklik ' olarak ' 180 piksel ' bu zaman. Yine border-radius özelliğini “değeri ile kullanın. 0 12rem 12rem 0 ”, burada ilk değer 0 sol üst taraf için, son değer 0 sol alt taraf içindir ve sağ üst ve sağ alt tarafı kırpmak için ikinci ve üçüncü değerler eklenir. Bu değerleri uygulamak, sağdan bir yarım daire oluşturacaktır.

CSS

div {
Genişlik : 90 piksel ;
yükseklik : 180 piksel ;
sınır yarıçapı : 0 12rem 12rem 0 ;
arka plan rengi : mor ;
}

Çıktı

Örnek 4: CSS ile Soldan Yarım Daire Oluşturun

Bu sefer, ' değeri boyunca border-radius özelliğini belirtin. 12rem 0 0 12rem ”; ilk ve son değer 12rem, div'in sol üst ve sol alt tarafını kesecek, ikinci ve üçüncü değeri 0'a ayarlamak, dairenin sağ üst ve sağ alt tarafını temizleyecektir. Sonunda, sol taraflı yarım dairemiz oluşturulacak.

CSS

div {
Genişlik : 90 piksel ;
yükseklik : 180 piksel ;
sınır yarıçapı : 12rem 0 0 12rem ;
arka plan rengi : mor ;
}

Çıktı

CSS ile yarım daire oluşturmak için farklı yöntemler sunduk.

Çözüm

Yarım daire oluşturmak için basitçe CSS'yi kullanabiliriz “ sınır yarıçapı ' Emlak. Yarım daire, sol, sağ, üst ve alt gibi bir yandan diğer yana oluşturulabilir. Border-radius özelliğinde, ilk değer sol üst, ikincisi sağ üst, üçüncü değer sağ alt ve dördüncü değer sol alt taraf içindir. Bu yazı, CSS ile bir yarım dairenin nasıl oluşturulacağını açıkladı.