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

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

問題:

次のコマンドを使用して、両端に矢印が付いた細長い六角形のボタンをデザインします。 HTML 要素と CSS は 1 つだけです。

課題:

:before 要素と :after 要素の両方を使用すると、片側に 2 つの矢印が作成され、追加の要素が必要になります。さらに、矢印の位置合わせとサイズ変更にも問題があります。

単一要素による解決策:

これらの課題に対処するために、内部で 2 つの疑似要素を使用する代替アプローチが登場しました。単一のelement:

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 要素 1 つと CSS だけを使用して細長い六角形のボタンを作成できます。

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