Como desenhar uma linha diagonal usando CSS

Como desenhar uma linha diagonal usando CSS
No CSS, as linhas são principalmente horizontais ou verticais. No entanto, usando propriedades CSS, você pode alterar a posição das linhas. No contexto do CSS, uma linha diagonal é apenas uma rotação de uma linha horizontal em um ângulo de 45 graus ou -45 graus. Isso é possível com a ajuda do CSS “transformar" propriedade.

Este guia mostrará como usar o CSS “transformar”Propriedade para desenhar uma linha diagonal.

Como desenhar diagonal no CSS?

Para desenhar uma diagonal no CSS, o “transformar”Propriedade é usada. Primeiro, discutiremos o “transformar”Propriedade para que você possa entender de uma maneira melhor.

Qual é a propriedade "Transform" em CSS?

No CSS, o “transformar”A propriedade é usada para a transformação 2D e 3D dos elementos HTML. Usando esta propriedade, um elemento pode ser girado, movido, distorcido e escalado. Mais especificamente, você pode utilizar a propriedade Transform para desenhar uma linha diagonal usando CSS.

Sintaxe

A sintaxe da propriedade Transform é:

Transform

Descrição dos valores acima é dada abaixo:

  • nenhum: É usado para restringir a transformação de um elemento.
  • Funções de transformação: É usado para invocar várias funções, como girar, girar (), escala (), mover () e distorcer ().

Vamos conferir alguns exemplos práticos relacionados a desenhar uma linha diagonal a 45 e -45 graus.

Exemplo 1: Desenhe uma linha diagonal a 45 graus usando CSS

Primeiro, crie uma div vazia na seção HTML para adicionar uma linha diagonal. No nosso caso, adicionamos um título

e a .

Html


Linha diagonal



Agora, vá para a seção CSS para adicionar uma linha diagonal.

No CSS, usamos “div”Para acessar o contêiner criado no HTML. Em seguida, aplique o “fundo de fronteira”Propriedade e defina os valores da fronteira como“3px","sólido", e "RGB (255, 0, 0)”, Respectivamente. Então, use o “largura”Propriedade na próxima etapa e define os valores como“40%”. Além disso, atribua o valor da propriedade de transformação como “girar (45deg)”E a propriedade de origem transformada como“esquerda”Para desenhar a linha diagonal a partir do lado esquerdo.

CSS

div
fundo de borda: 3px RGB sólido (255, 0, 0);
largura: 45%;
Transformar: girar (45deg);
Origin de transformação: esquerda;

Observação: Aqui o "Origina de transformação”A propriedade é usada para definir a posição da diagonal ao longo do eixo x e do eixo y.

Como resultado do código acima mencionado, você verá a seguinte saída:

Exemplo 2: Desenhe uma linha diagonal a -45 graus usando CSS

Neste exemplo, desenharemos uma linha diagonal usando um “-45DEGÂngulo. Para esse fim, vá para a seção CSS e altere o valor da propriedade Transform e a propriedade de transformar-se-origin.

Aqui, definiremos o valor da propriedade Transform como “-45DEG”E a origem de transformação como“certo”.

CSS

div
fundo de borda: 3px RGB sólido (0, 47, 255);
largura: 45%;
Transformar: girar (-45deg);
Origin de transformação: certo;

Salve o código, vá para o arquivo HTML e execute -o para ver o seguinte resultado:

A imagem acima mencionada indica que a propriedade Transform é implementada com sucesso. Quero desenhar uma linha dentro de uma caixa? Confira o próximo exemplo!

Exemplo: desenhe uma linha diagonal dentro da caixa usando CSS

Para desenhar uma diagonal dentro da caixa, crie uma caixa e depois desenhe uma diagonal dentro dela. Para fazer isso, adicionaremos um título e criaremos um nome de classe Div “caixa”E então crie outra div dentro de seu nome de classe“linha”.

Html


Linha diagonal





Agora, vá para o CSS para desenhar uma diagonal dentro da caixa, especifique os valores das propriedades de largura e altura como “300px”. Depois disso, adicione uma borda ao redor do div usando a propriedade da fronteira e defina seus valores como “5px","sólido", e "RGB (202, 33, 75)”.

CSS

.caixa
Largura: 300px;
Altura: 300px;
borda: 5px RGB sólido (202, 33, 75);

Isso mostrará o seguinte resultado:

Em seguida, vá para a segunda div e invocar o “calc ()”Função para calcular o comprimento da diagonal de acordo com o tamanho da caixa quadrada. Para isso, use a fórmula da diagonal dentro da praça “lado*√2”, Onde o valor de √2 é“1.41”, E o lado da praça é“300px”.

Além disso, defina o valor da propriedade do fundo da fronteira como “3px","sólido", e "RGB (1, 68, 12)”, Respectivamente. Por fim, atribua o valor da propriedade de transformação como “girar (45deg)”E a propriedade de origem transformada como“esquerda”Para desenhar a linha diagonal.

CSS

.linha
Largura: Calc (300px*1.41);
fundo de borda: 3px RGB sólido (1, 68, 12);
Transformar: girar (45deg);
Origin de transformação: esquerda;

Saída

Nós compilamos os métodos mais fáceis para desenhar uma linha diagonal usando CSS.

Conclusão

Para desenhar a linha diagonal, o “transformarA propriedade do CSS é usada, o que muda a posição das mudanças diagonais de acordo com o valor dado do grau, “45DEG" ou "-45DEG”. Usando isso, você pode definir os diferentes ângulos da linha de acordo com sua escolha. Neste artigo, explicamos o método para desenhar uma linha diagonal usando a propriedade Transform com a ajuda de exemplos.