하나의 HTML 요소와 CSS만 사용하여 길쭉한 육각형 버튼을 어떻게 만들 수 있나요?

하나의 요소만으로 긴 육각형 버튼 생성

문제:

할 수 있습니다. 여러 가지 방법을 사용하지 않고 HTML과 CSS만 사용하여 육각형 모양의 버튼을 만듭니다. 요소?

가능한 해결 방법:

아래는 단일 요소만 사용하여 이 효과를 얻을 수 있는 대체 방법입니다.

1. 의사 요소 활용: 절반 크기를 모방하는 :before 및 :after 의사 요소 사용 테두리를 포함한 메인 버튼의 구성입니다.
2. 모양 절반 정의: :before 요소는 모양의 위쪽 절반을 형성하고 :after는 아래쪽 절반을 형성합니다. 각각은 육각형과 유사한 특정 높이와 테두리 배열을 가지고 있습니다.
3. 기울기 및 위치: 원근감 있는 RotateX는 의사 요소를 기울이고 적절하게 배치하여 전체 버튼 모양을 형성하는 데 사용됩니다. .

예시 코드:

/* General Button Style */
.button {
  position: relative;
  display: block;
  background: transparent;
  width: 300px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 20px;
  text-decoration: none;
  text-transform: uppercase;
  color: #e04e5e;
  margin: 40px auto;
  font-family: Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}

.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 {
  border: 4px solid #e04e5e;
}

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

.button.border:hover {
  color: #fff;
}

<a href="#" class="button border">Click me!</a>

참고: 브라우저 접두사를 사용하려면 modernizr 또는 접두사를 포함하세요.

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