하나의 HTML 요소만 사용하여 화살표가 있는 길쭉한 육각형 버튼을 어떻게 만들 수 있습니까?

단일 HTML 요소로 길쭉한 육각형 버튼 생성

문제:

하나만 사용하여 양쪽 끝에 화살표가 있는 길쭉한 육각형 모양의 버튼을 디자인합니다. HTML 요소와 CSS.

도전 과제:

:before 및 :after 요소를 모두 사용하면 한쪽에 두 개의 화살표가 생성되므로 추가 요소가 필요합니다. 또한 화살표를 정렬하고 크기를 조정하는 것도 문제가 됩니다.

단일 요소를 사용한 솔루션:

이러한 문제를 해결하기 위해 내부에 두 개의 의사 요소를 사용하는 대체 접근 방식이 등장했습니다. 단일 요소:

1. 의사 요소: :before 및 :after 의사 요소는 둘 다 기본 버튼 크기의 절반이며 모양의 위쪽 및 아래쪽 절반을 형성합니다.
2. 위치 지정: :before 요소는 관점과 회전을 통해 맨 위에 배치됩니다. 각진 효과. :after 요소는 아래에 위치하고 회전하여 반대 각도를 만듭니다.
3. 테두리 조작: 특정 지점에서 테두리를 제거하면 화살표가 확장되는 육각형 모양이 생성됩니다. 양쪽 끝.

예 코드:

.button {
  position: relative;
  display: block;
  background: transparent;
  width: 300px;
  height: 80px;
  ...

  .button:before,
  .button:after {
    position: absolute;
    content: '';
    width: 300px;
    left: 0px;
    height: 34px;
    z-index: -1;
  }

  .button:before {
    transform: perspective(15px) rotateX(3deg);
  }
  .button:after {
    top: 40px;
    transform: perspective(15px) rotateX(-3deg);
  }

  /* Button Border Style */

  .button.border:before,
  .button.border:after {
    border: 4px solid #e04e5e;
  }
  .button.border:before {
    border-bottom: none;
  }
  .button.border:after {
    border-top: none;
  }

  /* Button hover styles */

  .button.border:hover:before,
  .button.border:hover:after {
    background: #e04e5e;
  }
  .button.border:hover {
    color: #fff;
  }
}

이 접근 방식을 사용하면 추가 요소 없이 하나의 HTML 요소와 CSS만 사용하여 길쭉한 육각형 모양의 버튼을 만들 수 있습니다.

위 내용은 하나의 HTML 요소만 사용하여 화살표가 있는 길쭉한 육각형 버튼을 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!