순수 CSS로 이중 화살표를 그리는 방법(코드 예)-CSS 튜토리얼-php.cn

순수 CSS로 이중 화살표를 그리는 방법(코드 예)

青灯夜游

풀어 주다： 2021-05-21 09:30:29

앞으로

2641명이 탐색했습니다.

이 글에서는 순수 CSS를 사용하여 이중 화살표 효과를 그리는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

순수 CSS로 이중 화살표를 그리는 방법(코드 예)

(학습 영상 공유: css 영상 튜토리얼)

1. 단일 화살표를 여러 번 호출

단일 화살표 구현~~ 이중 화살표 구현은 쉽습니다. 위에서 소개한 단일 화살표의 원리: 프레임 회전 방식, 이중 삼각형 커버리지 방식. 이번에는 테두리 회전을 예로 들어 이중 화살표를 구현하기 위해 여러 번 호출합니다.

.arrow-right{
  height: 120px;
  width: 30px;
  display :inline-block;
  position: relative;
}
.arrow-right::after {
  content: "";
  height: 60px;
  width: 60px;
  top: 12px;
  border-width: 8px 8px 0 0;
  border-color: blue;
  border-style: solid;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
}

로그인 후 복사

를 구현하는 테두리 회전 단일 화살표의 효과 다이어그램은 다음과 같습니다.
순수 CSS로 이중 화살표를 그리는 방법(코드 예)
2 단일 화살표

<div>
	<span class="arrow-right"/>
    <span class="arrow-right"/>
</div>

로그인 후 복사

를 여러 번 호출하는 효과 다이어그램은 다음과 같습니다.
순수 CSS로 이중 화살표를 그리는 방법(코드 예)

2 .

바로 앞에 이중 화살표를 그립니다. ::after 의사 요소를 통해 단일 화살표를 그리고 이제 ::before 의사 요소를 추가하여 단일 화살표를 그려 순수 CSS를 사용하여 이중 화살표 그리기를 구현합니다.

.arrow-right{
  height: 120px;
  width: 30px;
  display :inline-block;
  position: relative;
}
.arrow-right::before {
  content: "";
  height: 60px;
  width: 60px;
  top: 12px;
  left: 30px;
  border-width: 8px 8px 0 0;
  border-color: blue;
  border-style: solid;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
}
.arrow-right::after {
  content: "";
  height: 60px;
  width: 60px;
  top: 12px;
  border-width: 8px 8px 0 0;
  border-color: blue;
  border-style: solid;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
}

로그인 후 복사

렌더링은 다음과 같습니다.
순수 CSS로 이중 화살표를 그리는 방법(코드 예)
이중 삼각형 오버레이 방법은 이중 화살표를 직접 그릴 수도 있지만 구현하기가 더 번거로우므로 테두리 회전 방법만큼 구현하기가 쉽지 않습니다. 그것에 들어가십시오.