Um dos padrões de design de design bastante comuns que você provavelmente já encontrou são blocos com uma transição angular de cores degradê. Parece algo como a imagem abaixo.
Gradiente angular dentro do retânguloEu me deparei com isso enquanto trabalhava em um de nossos projetos e, em vez de implementar esse efeito usando uma imagem ou SVG, decidimos usar um gradiente linear, cuja vantagem era que era fácil alterar o ângulo de inclinação, as cores de gradiente etc. diretamente em CSS.
Figura 2: bordas irregulares do gradiente angularO resultado foi semelhante ao mostrado na Figura 2. Como você pode ver, entalhes salientes bastante proeminentes apareceram na borda da transição das cores do gradiente.
Felizmente, existe uma maneira muito simples de resolver esse problema! Normalmente, quando você deseja criar uma linha de mudança abrupta de cores em um gradiente linear, escreva o código da seguinte forma:
background: linear-gradient(176deg, white, white 75%, black 75%, black 100%);
Isso significa que, no intervalo de 0 a 75% do tamanho do bloco, a cor do preenchimento será branca e começará com 75% - preto. Isso cria uma linha bastante irregular. Infelizmente, com um certo ângulo de inclinação e tamanho do bloco, pode resultar em um zigue-zague bastante feio.
A correção disso exige alterações muito pequenas - adicione a parte decimal à segunda porcentagem, o que criará um leve borrão na linha de transição de cores. Dependendo da sua situação específica, pode ser necessário selecionar o valor necessário para que o desfoque não seja muito perceptível - mas suavize visualmente.
background: linear-gradient(176deg, white, white 75%, black 75.3%, black 100%);
Comparação de linhas de gradiente irregulares e suavesExemplo de CodePen:
Espero que no futuro isso ajude você a resolver os problemas.
Obrigado amakhrov pela ideia com "calc"Na minha opinião, com calc () será mais confiável: não depende do tamanho e do ângulo de inclinação linear-gradient(176deg, #A663CC, #A663CC 75%, #6F2DBD calc(75% + 1px))