의사 요소만 사용하여 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css while using dom this

성명：

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