CSS를 사용하여 DIV 배경에 대각선을 어떻게 만들 수 있습니까?

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

문제 설명

다음 HTML 및 CSS 코드를 고려하세요.

<div class="preview-content">
  PREVIEW
</div>

.preview-content {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=) repeat;
  width: 100%;
  min-height: 300px;
  max-height: 300px;
  line-height: 300px;
  text-align: center;
  vertical-align: middle;
  font-size: 2em;
}

미리보기 콘텐츠 배경에 대각선을 추가하는 것이 목표입니다. div(다음 이미지 참조):

[대각선이 있는 DIV 이미지]

솔루션

요소의 크기에 동적으로 조정되는 확장 가능한 솔루션을 얻을 수 있습니다. 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%);
}

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

위 내용은 CSS를 사용하여 DIV 배경에 대각선을 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!