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.