"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > 삼각형 배경에서 선형 그라데이션으로 부드러운 선을 얻는 방법은 무엇입니까?

삼각형 배경에서 선형 그라데이션으로 부드러운 선을 얻는 방법은 무엇입니까?

2024년 11월 15일에 게시됨
검색:422

 How to Achieve a Smooth Line with Linear Gradient in a Triangular Background?

선형 그라데이션으로 배경 이미지에 들쭉날쭉한 가장자리 생성: 선을 부드럽게 하는 방법

이미지에 뾰족한 아래쪽 가장자리를 만들기 위한 노력 , 베이스에 두 개의 반응 삼각형을 생성하도록 선택할 수 있습니다. 그러나 그러한 디자인에서 매끄러운 라인을 달성하는 것은 어려울 수 있습니다. 원래 질문에서 언급했듯이 이 목적으로 사용된 선형 그라데이션은 "하드 스톱" 동작으로 인해 가장자리가 고르지 않게 나타나는 경향이 있습니다.

해결책은 그라데이션 내에서 색상 전환을 수정하는 데 있습니다. 두 번째 색상의 시작점을 첫 번째 색상의 끝점에서 약간 이동하면 미묘한 흐림 효과를 도입할 수 있습니다. 이렇게 하면 선명한 색상 전환이 완화되고 선이 더 부드러워집니다.

원래 코드를 참조하여 다음과 같은 방식으로 선형 그라데이션 속성을 수정합니다.

.lefttriangle {
  ...
  background-image: linear-gradient(to right top, #ffffff 48%, transparent 50%);
}

.righttriangle {
  ...
  background: linear-gradient(to left top, #ffffff 48%, transparent 50%);
}

표시된 것처럼 중지점과 시작점을 조정하면 색상 전환이 덜 갑작스러워지고 삼각형 밑면에 있는 선의 매끄러움이 향상됩니다. 이 해상도는 응답성을 저하시키지 않으면서 대부분의 최신 브라우저와 호환된다는 점은 주목할 가치가 있습니다.

최신 튜토리얼 더>

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3