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

要素が 1 つだけある細長い六角形のボタンの作成

問題:

複数のツールを使用せずに、HTML と CSS のみを使用して六角形のボタンを作成します。要素?

考えられる解決策:

以下は、単一の要素のみを使用してこの効果を実現する別の方法です:

1. 擬似要素を利用する: 半分を模倣する :before および :after 擬似要素を使用します。境界線を含むメイン ボタンのサイズ。
2. 形状の半分を定義: :before 要素は形状の上半分を形成し、:after 要素は下半分を形成します。それぞれに、六角形に似た特定の高さと境界線の配置があります。
3. 傾きと位置: 遠近法を使用した RotateX を使用して、疑似要素を傾け、それらを適切に配置してボタン全体の形状を形成します。 .

例コード:

/* General Button Style */
.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 {
  border: 4px solid #e04e5e;
}

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

.button.border:hover {
  color: #fff;
}

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

注: ブラウザーのプレフィックスを使用するには、modernizr またはプレフィックスを含めます。

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