CSS만 사용하여 화살표가 있는 길쭉한 육각형 버튼을 만드는 방법은 무엇입니까?

단일 요소가 있는 길쭉한 육각형 버튼

과제:

우리의 목표는 길쭉한 육각형을 만드는 것입니다. 추가 요소에 의존하지 않고 CSS만 사용하여 모양의 버튼을 만듭니다. 버튼에는 양쪽 바깥쪽을 가리키는 화살표가 있는 확장된 리본 모양의 테두리가 있어야 합니다.

해결책 1(질문에 제공됨):

이 접근 방식은 두 개의 유사 -요소(::before 및 ::after)를 사용하여 리본 테두리를 만듭니다. 그러나 이로 인해 화살촉의 비대칭 및 부적절한 중심 배치가 발생합니다.

개선된 솔루션:

설계를 개선하고 한계를 해결하기 위해 다음을 사용하는 대체 솔루션을 제안합니다. 다른 CSS 전략:

개념:

이 접근 방식에는 다음이 포함됩니다.

1. 전체의 절반을 구성하는 ::before 및 ::after 의사 요소 활용 기본 버튼 요소의 크기.
2. 이러한 의사 요소를 배치하여 위쪽과 아래쪽 절반을 형성합니다.
3. 원근감이 있는 회전X를 사용하여 원하는 기울기를 얻습니다. 효과.

구현:

/* General Button Style */

.button {
  /* Properties as before... */
}

/* Pseudo-elements */

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

.button:before {
  /* Top half; adjust rotation here... */
}

.button:after {
  /* Bottom half; adjust rotation here... */
  top: 40px;
}

/* Button Border Style */

.button.border:before,
.button.border:after {
  /* Properties as before... */
}

/* Etc., omitted for brevity */

설명:

• 의사 요소는 다음과 같습니다. 기본 버튼 요소 내에 절대적으로 배치됩니다.
• 상단 의사 요소는 시계 방향으로 회전하고 하단은 시계 반대 방향으로 회전하여 기울어진 느낌을 줍니다.
• 의사 요소에 테두리를 적용하여 육각형 모양을 만듭니다.
• 이 디자인을 사용하면 의사 요소의 너비와 높이 및 변환 속성을 조정하여 버튼의 모양과 크기를 완전히 사용자 정의합니다.

위 내용은 CSS만 사용하여 화살표가 있는 길쭉한 육각형 버튼을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!