Css ile ilgili küçük bir sorum var

Question

Merhaba,

Div kenarına şöyle bir border atıyorlar, daha doğrusu border mi onu anlayamadım
Bunu nasıl yapabilirim?

Örneğin burada da borderin bir kısmını kesip icon eklemişler
https://prnt.sc/24rr99n

Açıkçası ne diye araştıracağımı da bulamadım o yüzden size sormak istedim

Şimdiden teşekkürler

AnoxCore · Answer

Eğer borderin köşesinin keskinliği ise border-radius kullanarak azaltabilirsiniz. yuvarlaklaştırabilirsiniz.

Halimcandogan · Answer

Borderin bir kısmını kesmiyorlar iconu borderin hizasına getiriyorlar oda aynı kesilmiş gibi gösteriyor

Devaloper · Answer

Genellikle ::before, ::after gibi seçiciler ile öğeyi ekleyip position: relative; left, right, top, bottom ile konumlandırma yapılarak oluşturulur.

ChostFreak · Answer

AnoxCore adlı üyeden alıntı:						mesajı görüntüle									Eğer borderin köşesinin keskinliği ise border-radius kullanarak azaltabilirsiniz. yuvarlaklaştırabilirsiniz. 		Div etrafında komple border yok hocam sadece kenarlarda ve saydamlığı azalan bir yapısı var. Onu çözemedim

Halimcandogan adlı üyeden alıntı:						mesajı görüntüle									Borderin bir kısmını kesmiyorlar iconu borderin hizasına getiriyorlar oda aynı kesilmiş gibi gösteriyor 		O zaman oraya icon yerleştirip icon arka planını da ayarlayınca kesilmiş gibi duruyor. Mantıklı. Teşekkürler hocam yardımınız için

Decatos · Answer

divinizde b-angle diye bir class olsun farz edelim

.b-angle{width: 0; height: 0; border-top: 5px solid red; border-right: 5px solid transparent;}

bu şekilde px değerleri ile oynayarak yapabilirsiniz.

ChostFreak · Answer

Devaloper adlı üyeden alıntı:						mesajı görüntüle									Genellikle ::before, ::after gibi seçiciler ile öğeyi ekleyip position: relative; left, right, top, bottom ile konumlandırma yapılarak oluşturulur. 		Çok teşekkürler sanırım before ile yapmışlar genelde.

Decatos adlı üyeden alıntı:						mesajı görüntüle									divinizde b-angle diye bir class olsun farz edelim

.b-angle{width: 0; height: 0; border-top: 5px solid red; border-right: 5px solid transparent;}

bu şekilde px değerleri ile oynayarak yapabilirsiniz. 		Teşekkür ederim ancak saydamlığı azalan bir border yok burada. Anladığım kadarıyla üste bir border atıyoruz o kadar. Saydamlığını ayarlayamadım asıl sorunum o

Decatos · Answer

ChostFreak adlı üyeden alıntı:						mesajı görüntüle									Çok teşekkürler sanırım before ile yapmışlar genelde.

Teşekkür ederim ancak saydamlığı azalan bir border yok burada. Anladığım kadarıyla üste bir border atıyoruz o kadar. Saydamlığını ayarlayamadım asıl sorunum o  		Demek istediğinizi tam olarak anlayamadım ama sayfamlık için opacity:0.3 gibi değerler ile saydamlığı kontrol edebilirsiniz.

MrHyp3R · Answer

borderin bir kenarını kesip ikon eklemiyor. Sadece icona genişlik yükseklik veya padding veriyor ve arkaplana renk veriyor. Bu sayede border kesik gibi görünüyor

ChostFreak · Answer

Decatos adlı üyeden alıntı:						mesajı görüntüle									Demek istediğinizi tam olarak anlayamadım ama sayfamlık için opacity:0.3 gibi değerler ile saydamlığı kontrol edebilirsiniz. 		Genel opacity değil hocam tam olarak şöyle gösterebilirim
https://prnt.sc/24s06mm
İstediğim kenar bu tam olarak

KeremWho · Answer

ChostFreak adlı üyeden alıntı:						mesajı görüntüle									Genel opacity değil hocam tam olarak şöyle gösterebilirim
https://prnt.sc/24s06mm
İstediğim kenar bu tam olarak 		Gradient yapabilirsiniz. Şeffaf > Opak > Şeffaf yaparak buna benzer bir şey yapılabilir.

umityildrim · Answer

@ChostFreak; border-radius'tan yaparsınız. Eğer tam yuvarlamak isterseniz aşağıdaki gibi olur:

border-radius: 50%;Yukarıdaki olmazsa böyle yspın:

border-radius: 50vw;