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 é:
TransformDescrição dos valores acima é dada abaixo:
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
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.
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”.
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”.
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)”.
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.
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.