CSS에서 대각선을 그리는 방법

단일 라벨을 사용하여 아래 그림과 같은 슬래시 효과를 얻는 방법입니다. 즉, CSS를 사용하여 슬래시를 그리는 방법은 무엇입니까?

HTML 구조는 다음과 같다고 가정합니다:

<div></div>

방법 1, CSS3 회전 크기 조정

여기서 의사 요소를 사용하여 직선을 그린 다음 div 중심을 중심으로 45도 회전합니다. 그런 다음 다시 크기를 조정하여 .

CSS 코드의 구체적인 구현:

div{
  position:relative;
  margin:50px auto;
  width:100px;
  height:100px;
  box-sizing:border-box;
  border:1px solid #333;  
  // background-color:#333;
  line-height:120px;
  text-indent:5px;
}
div::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:50px;
  box-sizing:border-box;
  border-bottom:1px solid deeppink;
  transform-origin:bottom center;
  // transform:rotateZ(45deg) scale(1.414);
  animation:slash 5s infinite ease;
}
@keyframes slash{
  0%{
    transform:rotateZ(0deg) scale(1);
  }
  30%{
    transform:rotateZ(45deg) scale(1);
  }
  60%{
    transform:rotateZ(45deg) scale(1.414);
  }
  100%{
    transform:rotateZ(45deg) scale(1.414);
  }
}

방법 2, 선형 그래디언트 구현

이 방법은 배경의 선형 그래디언트 구현을 사용합니다. 그래디언트 배경에서 중요한 점은 이름은 그래디언트라고 하지만, 그라데이션 대신 단색을 그릴 수도 있습니다.

선형 그래디언트 방향을 45deg로 선택하고 그래디언트 색상 값을 투명 ->딥핑크 ->투명으로 설정합니다.

transparent는 투명한 색상 값입니다.

다음과 같은 간단한 문장으로 슬래시 효과를 얻을 수 있습니다:

div{
  background:
    linear-gradient(45deg, transparent 49.5%, deeppink 49.5%, deeppink 50.5%, transparent 50.5%);
}

위 내용은 CSS에서 대각선을 그리는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!