HTML 要素と CSS を 1 つだけ使用して、細長い六角形のボタンを作成するにはどうすればよいですか?

単一要素を使用した細長い六角形のボタンの作成

Web 開発では、特に CSS のみを使用する場合、カスタム ボタン形状の作成が困難になることがあります。追加の HTML 要素を避けます。両側に細長い矢じりを持つ六角形のボタンを作成しようとすると、一般的なジレンマが発生します。

既存のアプローチ

標準的な方法の 1 つは、:before 擬似と :after 擬似の両方を利用することです。 -片側に単一の矢印を生成する要素。ただし、これには反対側に矢印を作成するためにリンク内に別の span 要素を含める必要があり、解決策が複雑になります。

別のアプローチには、:after と :before を使用してリボン アウトセットの境界線を作成することが含まれます。わずかに傾いた角度を持つ疑似要素。ただし、この方法では、位置ずれや矢じりの長さが不均一になることがよくあります。

改良された単一要素ソリューション

ここでは、目的の六角形を実現するために 1 つの要素のみを使用する洗練されたアプローチを示します。ボタン形状:

コード:

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;
}

説明:

• 2疑似要素 (:before および :after) が使用され、それぞれの高さは 34 ピクセル (境界線を含む)、幅は 300 ピクセル (ボタンの幅) です。
• 形状の上半分は、エレベーティングによって作成されます。 :before 要素は、rotateX(3deg) をわずかに使用します。
• 下半分は、:after 要素によって形成され、次のように高められます。ボタンの上端に揃えるために、rotateX(-3deg) と 40px のオフセットを設定します。
• 両方の疑似要素には、0px の左オフセットと -1 の Z インデックスが与えられ、確実に重なり合って作成されます。
• 枠線スタイルがボタン要素に適用され、細い枠線 (4 ピクセルの実線 #e04e5e) が作成され、疑似要素の境界線を非表示にします (下端と上端の境界線はありません)。
• カーソルを置くと、疑似要素の背景が #e04e5e に変更され、ボタンのテキストの色が白になります。

このテクニックは、CSS と 1 つの HTML 要素のみを使用して、細長い六角形のボタンを効果的に作成し、クリーンでシンプルなボタンを提供します。設計上の課題に対する簡潔な解決策。

以上がHTML 要素と CSS を 1 つだけ使用して、細長い六角形のボタンを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。