Jak narysować prostokąt w HTML lub CSS

Prostokąt można stworzyć za pomocą HTML, a także kombinacji HTML i CSS. Używając właściwości CSS do narysowania prostokąta, po prostu wymagane jest dodanie odpowiedniego selektora elementu HTML i zastosowania niektórych właściwości stylizacji w elemencie stylu CSS. Ale jeśli deweloper chce narysować prostokąt bez dodawania oddzielnego elementu stylu CSS, styl inline może być używany w tagach otwierających HTML.

W tym artykule wyjaśniono, jak narysować prostokąt za pomocą następujących metod:

• Metoda 1: Rysowanie prostokąta za pomocą CSS
• Metoda 2: Rysowanie prostokąta za pomocą HTML

Metoda 1: Rysowanie prostokąta za pomocą CSS

Aby narysować prostokąt za pomocą elementu stylu CSS, należy dodać prosty element HTML, przypisując mu klasę lub identyfikator. Następnie właściwości można następnie zastosować do elementu za pośrednictwem selektorów ID lub klasy. Kształtuje element w postaci prostokąta.

Przykład
Zrozumiemy powyższą koncepcję za pomocą przykładu:

W powyższym oświadczeniu HTML „A„„Element kontenera został dodany z klasą zadeklarowaną jako„prostokąt".

Po utworzeniu „„Element, właściwości CSS można zastosować do niego, aby reprezentować kontener DIV jako prostokąt w interfejsie wyjściowym:

.prostokąt

szerokość: 300px;
Wysokość: 150px;
Tło: różowy;
margines lewicy: 25%;

W powyższym fragmencie kodu:

• Selektor klasowy „.prostokąt”Został dodany w celu odniesienia się do odpowiedniego elementu kontenera Div.
• Wewnątrz selektora klasy „szerokość„Własność została dodana i zdefiniowana jako„300px". To ustawi szerokość prostokąta na 300 pikseli.
• Podobnie „„ „wysokość„Właściwość ustawia wysokość prostokąta na„150px".
• "tło„Własność została zdefiniowana jako„różowy". To pokoloruje prostokąt różowy.
• „„margines lewic„Właściwość właśnie dodano, aby nieco przesunąć prostokąt w prawo, aby uzyskać lepszą wizualną reprezentację prostokąta.

To utworzy prostokąt na stronie internetowej:

Metoda 2: Rysowanie prostokąta za pomocą HTML

Innym podejściem jest dodanie wszystkich właściwości wymaganych do narysowania prostokąta w znacznikach otwierających HTML.

Przykład
Zrozum to prostym przykładem, dodając znacznik HTML „” wewnątrz znacznika „” (oba wewnątrz głównego znacznika div):

W powyższym fragmencie kodu:

• A "„Dodano element kontenera, aby utworzyć div z identyfikatorem”Rect".
• Wewnątrz otwierającego znacznika div, wbudowany CSS „margines„Własność określa pozycję umieszczania pionowego prostokąta lub Div jako„100px”I pozycja w poziomie jako„150px".
• W środku "„Element, jest„”(Skalowalny element grafiki wektorowej), aby dodać grafikę do„" element.
• Następnie „A„„Element został dodany z klasą zadeklarowaną jako„prostokąt".
• Wbudowany styl CSS w „”Tag definiuje kolor prostokąta jako„fioletowy" przez "Wypełnij: fioletowy" nieruchomość.
• „„szerokość”I„ „wysokość„Właściwości wbudowane określają odpowiednio długość poziomej i pionowej prostokąta.

Poniższe wyniki będą wygenerowane przez powyższy fragment kodu:

Wykazaliśmy dwie metody narysowania prostokąta.

Wniosek

Prostokąt można łatwo narysować podczas stosowania stylizacji wbudowanej. W takim przypadku wymagane jest po prostu dodanie „margines”,„wysokość" I "szerokość”Właściwości w otwierających znacznikach elementów. Dodając osobny element stylu CSS, dodaj „wysokość”,„szerokość" I "kolor”Właściwości w elemencie stylu CSS. W tym blogu omówiono podejścia do narysowania prostokąta w HTML lub CSS.