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

단일 요소로 긴 육각형 버튼 생성

웹 개발에서 사용자 정의 버튼 모양을 만드는 것은 어려울 수 있으며, 특히 CSS만 사용하는 경우에는 더욱 그렇습니다. 추가 HTML 요소를 피합니다. 양쪽에 길쭉한 화살촉이 있는 육각형 버튼을 만들려고 할 때 일반적인 딜레마가 발생합니다.

기존 접근 방식

표준 방법 중 하나는 :before 및 :after pseudo를 모두 활용하는 것입니다. -한쪽에 단일 화살표를 생성하는 요소입니다. 그러나 이렇게 하려면 반대편에 화살표를 만들기 위해 링크 내에 또 다른 범위 요소를 포함해야 하므로 솔루션이 복잡해집니다.

대체 접근 방식은 :after 및 :before를 사용하여 리본 바깥쪽 테두리를 만드는 것입니다. 약간 기울어진 각도를 가진 의사 요소. 그러나 이 방법을 사용하면 정렬이 잘못되고 화살촉 길이가 고르지 않게 되는 경우가 많습니다.

향상된 단일 요소 솔루션

원하는 육각형을 얻기 위해 하나의 요소만 사용하는 세련된 접근 방식은 다음과 같습니다. 단추 모양:

코드:

HTML:

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

CSS:

.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:before,
.button.border:after {
  border: 4px solid #e04e5e;
}
.button.border:before {
  border-bottom: none; /* to prevent the border-line showing up in the middle of the shape */
}
.button.border:after {
  border-top: none; /* to prevent the border-line showing up in the middle of the shape */
}

/* Button hover styles */

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

설명:

• 둘 의사 요소(:before 및 :after)가 사용되며 각각 높이(테두리 포함)가 34px이고 너비(버튼 너비)가 300px입니다.
• 모양의 위쪽 절반은 높이를 높여 생성됩니다. :before 요소는 RotateX(3deg)를 약간 사용합니다.
• 하단 절반은 :after 요소로 구성되며, RotateX(-3deg) 및 40px 오프셋을 사용하여 버튼의 위쪽 가장자리에 정렬합니다.
• 두 의사 요소 모두 왼쪽 오프셋 0px와 z-index -1이 지정되어 서로 겹쳐서 생성되도록 합니다.
• 버튼 요소에 테두리 스타일을 적용하여 얇은 테두리(4px 솔리드 #e04e5e 사용)를 만들고 테두리를 만듭니다. 보이지 않는 의사 요소(하단 및 상단 테두리 없음).
• 마우스를 올리면 의사 요소의 배경이 #e04e5e로 변경되고 버튼의 텍스트 색상이 흰색이 됩니다.

이 기술은 CSS와 단일 HTML 요소만 사용하여 길쭉한 육각형 모양의 버튼을 효과적으로 생성하여 디자인에 깔끔하고 간결한 솔루션을 제공합니다. 도전하세요.

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