CSS만 사용하여 DIV 배경에 대각선을 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

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

Linda Hamilton

풀어 주다： 2024-11-29 09:20:13

원래의

547명이 탐색했습니다.

How to Create Diagonal Lines in a DIV Background Using Only CSS?

CSS를 사용하여 DIV 배경에 대각선 만들기

문제:

다음을 사용하여 DIV 향상 첨부된 이미지에서 볼 수 있듯이 배경에 대각선을 표시하는 미리보기 상자입니다. 요청은 가능한 경우에만 CSS를 사용하도록 지정합니다.

CSS3 선형 그라데이션을 사용하는 솔루션:

선을 요소의 크기에 맞게 자동으로 조정하려면 결합된 CSS3 선형 그라데이션을 사용합니다. 계산()으로. 이 솔루션은 다양한 Chrome 버전과 호환됩니다:

.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%);
}

<textarea>

로그인 후 복사

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