CSS kullanmadan bu şekli vermeyi nasıl bekliyorsun? HTML, CSS olmadan düz metinden ibaret. CSS'in flex, grid gibi display özelliklerinden (layout) yararlanacaksın ki şu şemayı veresin.
Örneğin ilk kutuya bakalım. Bir div içerisinde iki adet div daha var. Bu divler birbirine eşit boyda ve kenarlarında hiç bir yuvarlanma yok.
Hiç CSS kullanmadan aynısını yapmaya çalışırsak (sadece div'de border var);
Nesnelere şekil vermek için bunu yapabiliriz. Flex-grow bir nesneyi flexboxın içerisine yayar. Flex grow'u büyük olan, küçük olandan daha fazla yer kaplar.
Sağdaki nesne aslında ikinci div, eğer onun flex grow değerini artırırsak;
Flexboxın yüksekliğini artırırsak isteğimize yaklaşır, bir de renkleri atalım;
@Againbirth sonuna kadar haklı mesajında. Boşuna kod bekleme, araştır, öğren.