CSS のみを使用して矢印付きの細長い六角形のボタンを作成する方法

単一要素を備えた細長い六角形のボタン

課題:

私たちの目標は、細長い六角形を作成することです。追加の要素に依存せず、CSS のみを使用して形をしたボタンを作成します。ボタンには、両側に外側を向いた矢印が付いた、拡張されたリボンのような境界線が付いている必要があります。

解決策 1 (質問に記載):

このアプローチでは、2 つの疑似メソッドを利用します。 -要素 (::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 中国語 Web サイトの他の関連記事を参照してください。