Como desenhar um retângulo em html ou css

Um retângulo pode ser criado usando HTML, bem como uma combinação de HTML e CSS. Ao usar as propriedades CSS para desenhar um retângulo, é simplesmente necessário adicionar o seletor relevante do elemento html e aplicar algumas propriedades de estilo no elemento de estilo CSS. Mas, se o desenvolvedor quiser desenhar um retângulo sem adicionar um elemento de estilo CSS separado, o estilo em linha pode ser usado dentro das tags de abertura HTML.

Este artigo explicará como desenhar um retângulo através dos seguintes métodos:

• Método 1: desenhando um retângulo usando CSS
• Método 2: desenhando um retângulo usando HTML

Método 1: desenhando um retângulo usando CSS

Para desenhar um retângulo usando o elemento de estilo CSS, um elemento HTML simples deve ser adicionado atribuindo -lhe uma classe ou um id. Em seguida, as propriedades podem ser aplicadas ao elemento através do ID ou seletores de classe. Molda o elemento na forma de um retângulo.

Exemplo
Vamos entender o conceito acima com a ajuda de um exemplo:

Na declaração HTML acima, uma “”O elemento de contêiner foi adicionado com uma classe declarada como“retângulo”.

Depois de criar um “”Elemento, as propriedades do CSS podem ser aplicadas a ele para representar o contêiner Div como um retângulo na interface de saída:

.retângulo

Largura: 300px;
Altura: 150px;
Antecedentes: rosa;
margem-esquerda: 25%;

No trecho de código acima:

• O seletor de classe “.retângulo”Foi adicionado para se referir ao respectivo elemento de contêiner Div.
• Dentro do seletor de classe, o “largura”A propriedade foi adicionada e definida como“300px”. Isso definirá a largura do retângulo para 300 pixels.
• Da mesma forma, o “altura”Propriedade define a altura do retângulo como“150px”.
• ““fundo”A propriedade foi definida como“rosa”. Isso vai colorir o rosa retângulo.
• O "margem-esquerda”A propriedade acabou de ser adicionada para mover o retângulo levemente para a direita para uma melhor representação visual do retângulo.

Isso criará um retângulo na página da web:

Método 2: desenhando um retângulo usando HTML

Outra abordagem é adicionar todas as propriedades necessárias para desenhar um retângulo nas tags de abertura HTML.

Exemplo
Vamos entender isso com um exemplo simples adicionando a tag HTML “” dentro da tag “” (ambos dentro da tag Div principal):

No trecho de código acima:

• A "”O elemento de contêiner foi adicionado para criar uma div com o id“ret”.
• Dentro da tag de abertura da div, o CSS embutido “margem”Propriedade define a posição de colocação vertical do retângulo ou da div como“100px”E a posição de colocação horizontal como“150px”.
• Dentro de "”Elemento, existe o“”(Elemento gráfico vetorial escalável) elemento para adicionar gráficos ao“" elemento.
• Em seguida, um “”O elemento foi adicionado à classe declarada como“retângulo”.
• O estilo CSS embutido no “”Tag define a cor do retângulo como“roxo" através de "Preencha: roxo" propriedade.
• O "largura" e a "altura”Propriedades embutidas definem o comprimento horizontal e vertical do retângulo, respectivamente.

O seguinte será o resultado gerado através do snippet de código acima:

Demonstramos dois métodos para desenhar um retângulo.

Conclusão

Um retângulo pode ser desenhado facilmente ao aplicar um estilo embutido. Nesse caso, é simplesmente necessário adicionar o “margem","altura" e "largura”Propriedades nas etiquetas de abertura dos elementos. Ao adicionar um elemento de estilo CSS separado, adicione o “altura","largura" e "cor”Propriedades no elemento de estilo CSS. Este blog discutiu as abordagens para desenhar um retângulo em HTML ou CSS.