Док дизајнирате веб локацију, додавање полукругова уместо кругова даје бољи изглед. Штавише, формирање полукругова је лако и занимљиво.
У овом чланку ћемо дати водич о томе како да направите полукруг користећи ЦСС.
Како направити полукруг са ЦСС-ом?
Да бисмо направили полукруг, користићемо „ граница-радијус ' имовина. Ово својство ће нам помоћи да направимо полукруг на следеће начине:
- Полукруг одозго
- Полукруг одоздо
- Полукруг са леве стране
- Полукруг са десне стране
Разрадимо сваки по један!
Пример 1: Направите полукруг одозго са ЦСС-ом
Да бисмо направили полукруг одозго, прво ћемо навести „ <див> ” елемент унутар ознаке тела наше ХТМЛ датотеке.
ХТМЛ
< див >< / див >Сада поставите одговарајуће димензије за див, као што ћемо доделити „ ширина ” вредност имовине као “ 180пк ' и ' висина “ својство са вредношћу “ 90пк ”. У следећем кораку подесите „ граница-радијус ' вредност имовине ' 12рем 12рем 0 0 ”; где ће прва цифра 12рем исећи горњу леву страну дива, друга 12рем ће скратити горњу десну страну, трећа и четврта цифра 0 ће исећи сав доњи део дива. На крају, да бисте кругу дали боју, користите „ боја позадине ” својство са вредношћу “ љубичаста ”.
ЦСС
див {ширина : 180пк ;
висина : 90пк ;
граница-радијус : 12рем 12рем 0 0 ;
боја позадине : љубичаста ;
}
Сачувајте ХТМЛ датотеку са поменутим кодом и отворите је у свом претраживачу:
Као што видите, успешно смо направили полукруг са ЦСС својством радијуса границе.
Пример 2: Направите полукруг одоздо помоћу ЦСС-а
За формирање полукруга одоздо, поставићемо вредности својства радијуса границе као „ 0 0 12рем 12рем “, где прве две вредности представљају горњи леви и горњи десни ивица-радијус. Поставили смо их на 0 да би горња половина дива потпуно нестала. За доњи део, само смо мало скратили доњу леву и доњу десну страну тако што смо поставили вредности на 12рем.
ЦСС
див {ширина : 180пк ;
висина : 90пк ;
граница-радијус : 0 0 12рем 12рем ;
боја позадине : љубичаста ;
}
Излаз
Пример 3: Направите полукруг са десне стране помоћу ЦСС-а
Да бисте направили ЦСС полукруг на десној страни, прво подесите висину и ширину контејнера јер је потребно да добијете правилан облик круга. Подесите ' ширина ' као ' 90пк ' и ' висина ' као ' 180пк ' овог пута. Опет, користите својство радијуса границе са вредношћу „ 0 12рем 12рем 0 “, где је прва вредност 0 за горњу леву страну, последња вредност 0 је за доњу леву страну, а друга и трећа вредност се додају да се исеку горња десна и доња десна страна. Применом ових вредности формираће се полукруг са десне стране.
ЦСС
див {ширина : 90пк ;
висина : 180пк ;
граница-радијус : 0 12рем 12рем 0 ;
боја позадине : љубичаста ;
}
Излаз
Пример 4: Направите полукруг са леве стране помоћу ЦСС-а
Овај пут наведите својство радијуса границе дуж вредности „ 12рем 0 0 12рем ”; прва и последња вредност 12рем ће исећи горњу леву и доњу леву страну дива, постављањем друге и треће вредности на 0 ће бити јасно горња десна и доња десна страна круга. На крају ће се створити наш левостран полукруг.
ЦСС
див {ширина : 90пк ;
висина : 180пк ;
граница-радијус : 12рем 0 0 12рем ;
боја позадине : љубичаста ;
}
Излаз
Понудили смо различите методе за креирање полукруга помоћу ЦСС-а.
Закључак
Да бисмо направили полукруг, можемо једноставно користити ЦСС “ граница-радијус ' имовина. Полукруг се може креирати са једне на другу страну, на пример са леве, десне, горње и доње стране. У својству радијуса границе, почетна вредност је за горњи леви, друга за горњи десни, трећа за доњи десни, а четврта вредност за доњу леву страну. Овај текст је објаснио како да направите полукруг помоћу ЦСС-а.