찾다
웹 프론트엔드CSS 튜토리얼하나의 HTML 요소만 사용하여 화살표가 있는 길쭉한 육각형 버튼을 어떻게 만들 수 있습니까?

How Can I Create an Elongated Hexagonal Button with Arrows Using Only One HTML Element?

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

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
마우스 움직임을 시뮬레이션합니다마우스 움직임을 시뮬레이션합니다Apr 22, 2025 am 11:45 AM

라이브 토크 나 수업 중에 대화식 애니메이션을 표시해야한다면 슬라이드와 상호 작용하기가 항상 쉽지 않다는 것을 알 수 있습니다.

Astro Actions 및 Fuse.js로 검색을 전원합니다Astro Actions 및 Fuse.js로 검색을 전원합니다Apr 22, 2025 am 11:41 AM

Astro를 사용하면 빌드 중에 대부분의 사이트를 생성 할 수 있지만 Fuse.js와 같은 것을 사용하여 검색 기능을 처리 할 수있는 작은 서버 측 코드가 있습니다. 이 데모에서는 퓨즈를 사용하여 개인 "북마크"세트를 검색합니다.

정의되지 않은 : 세 번째 부울 가치정의되지 않은 : 세 번째 부울 가치Apr 22, 2025 am 11:38 AM

문서가 저장되는 동안 Google 문서에서 볼 수있는 것과 유사한 프로젝트 중 하나에서 알림 메시지를 구현하고 싶었습니다. 다시 말해, a

제 3의 진술의 방어에서제 3의 진술의 방어에서Apr 22, 2025 am 11:25 AM

몇 달 전에 나는 해커 뉴스를 썼고 (하나와 마찬가지로) IF 문을 사용하지 않는 것에 대한 (현재 삭제 된) 기사를 가로 질러 달렸습니다. 이 아이디어를 처음 접한다면 (나처럼

다국어 번역에 웹 스피치 API 사용다국어 번역에 웹 스피치 API 사용Apr 22, 2025 am 11:23 AM

공상 과학 소설의 초기부터 우리는 우리와 대화하는 기계에 대해 환상을 가지고 있습니다. 오늘은 평범합니다. 그럼에도 불구하고 제작 기술

Jetpack Gutenberg 블록Jetpack Gutenberg 블록Apr 22, 2025 am 11:20 AM

Gutenberg가 핵심으로 풀려 났을 때를 기억합니다. 왜냐하면 나는 그날 WordCamp에 있었기 때문입니다. 지금은 몇 달이 지났으므로 점점 더 많은 것을 상상합니다.

VUE에서 재사용 가능한 페이지 매김 구성 요소 생성VUE에서 재사용 가능한 페이지 매김 구성 요소 생성Apr 22, 2025 am 11:17 AM

대부분의 웹 애플리케이션의 배후에있는 아이디어는 데이터베이스에서 데이터를 가져 와서 최상의 방법으로 사용자에게 제시하는 것입니다. 우리가 거기에서 데이터를 다룰 때

'Box Shadows'와 Clip-Path를 함께 사용합니다'Box Shadows'와 Clip-Path를 함께 사용합니다Apr 22, 2025 am 11:13 AM

#039;는 당신이 의미있는 것처럼 보일 수있는 상황에 대한 약간의 단계를 수행하자. 이것에서

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구