선형 그라디언트를 사용하여 배경 이미지의 가장자리가 매끄럽고 뾰족한 끝을 만드는 방법은 무엇입니까?

부드러운 가장자리가 있는 배경 이미지의 뾰족한 끝을 위한 선형 그라데이션 조정

문제:

이미지의 뾰족한 아래쪽 가장자리 만들기 선형 그라데이션을 사용하는 두 개의 반응형 삼각형을 사용하면 들쭉날쭉한 가장자리가 생성됩니다.

해결책:

들쭉날쭉한 가장자리를 제거하려면 선형 그라데이션 이미지에서 색상이 갑자기 멈추는 것을 피하세요. . 대신 정지점을 수정하여 미묘한 흐림 효과를 만듭니다.

<code class="css">.lefttriangle {
  ...
  background-image: linear-gradient(to right top, #ffffff 48%, transparent 50%);
}
.righttriangle {
  ...
  background: linear-gradient(to left top, #ffffff 48%, transparent 50%);
}</code>

이 조정은 두 번째 색상의 시작을 첫 번째 색상의 끝에서 약간 이동시켜 결과적으로 전환이 더욱 원활해졌습니다.

위 내용은 선형 그라디언트를 사용하여 배경 이미지의 가장자리가 매끄럽고 뾰족한 끝을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!