CSS를 사용하여 DIV에 대각선 배경을 만드는 방법은 무엇입니까?

CSS를 사용하여 DIV 배경에 대각선 추가

질문:

배경에 대각선을 어떻게 추가할 수 있나요? 만을 사용하여 DIV 요소의 CSS?

참고: 원하는 효과는 제공된 이미지와 같습니다.

해결책:

요소의 크기에 자동으로 조정하려면 다음을 활용하세요. 그림과 같이 CSS3 선형 그라데이션 및 calc() 함수 아래:

.crossed {
     background: 
         linear-gradient(to top left,
             rgba(0,0,0,0) 0%,
             rgba(0,0,0,0) calc(50% - 0.8px),
             rgba(0,0,0,1) 50%,
             rgba(0,0,0,0) calc(50% + 0.8px),
             rgba(0,0,0,0) 100%),
         linear-gradient(to top right,
             rgba(0,0,0,0) 0%,
             rgba(0,0,0,0) calc(50% - 0.8px),
             rgba(0,0,0,1) 50%,
             rgba(0,0,0,0) calc(50% + 0.8px),
             rgba(0,0,0,0) 100%);
}

참고: HTML 예는 다음과 같습니다.

<textarea class="crossed"></textarea>

위 내용은 CSS를 사용하여 DIV에 대각선 배경을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!