의사 요소만 사용하여 CSS 전용 마법사에서 활성 페이지 사이에 화살표를 만들려면 어떻게 해야 합니까?

CSS에서만 화살표 생성

문제:

마법사 같은 주문 프로세스에서 , 활성 페이지가 녹색으로 강조 표시된 메뉴가 있습니다. 목표는 CSS만 사용하여 하나의 활성 페이지에서 다음 페이지를 가리키는 화살표를 만드는 것입니다.

해결책:

:before 및 :after 의사 사용 -요소

여러 개의

및 이미지를 사용하는 대신, CSS 의사 요소(:before 및 :after)를 활용하면 DOM에 추가 요소를 추가하지 않고도 화살표를 생성할 수 있습니다. 이 기술에는 원하는 테두리가 있는 회전된 사각형을 만들고 적절하게 배치하는 작업이 포함됩니다.

#flowBoxes div {
  display: inline-block;
  position: relative;
  height: 25px;
  line-height: 25px;
  padding: 0 20px;
  border: 1px solid #ccc;
  margin-right: 2px;
}

#flowBoxes div.right:after {
  content: '';
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  width: 18px;
  height: 18px;
  position: absolute;
  right: 0;
  top: -1px;
  background-color: white;
  z-index: 150;
  transform: translate(10px, 4px) rotate(45deg);
}

#flowBoxes div.left:before {
  content: '';
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  width: 18px;
  height: 18px;
  position: absolute;
  left: 0;
  top: -1px;
  background-color: white;
  z-index: 50;
  transform: translate(-10px, 4px) rotate(45deg);
}

활성 페이지 스타일 지정

활성 페이지에 녹색 화살표를 제공하려면 다음 스타일:

.active {
  background-color: green;
  color: white;
}

.active:after {
  background-color: green;
}

이 접근 방식은 사이 공간의 단색을 유지하면서 원하는 화살표를 만듭니다.

위 내용은 의사 요소만 사용하여 CSS 전용 마법사에서 활성 페이지 사이에 화살표를 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.