CSS3 変換を使用して Div 要素にベベルコーナー効果を実現するにはどうすればよいですか?

CSS3 変換を使用して Div 要素に斜めの角を作成する方法

問題:

次の HTML ドキュメントを考えてみましょう。直線の境界線を持つ div 要素。下の画像に示すように、スタイルを変更してベベルの角を実現するにはどうすればよいですか?

[ベベルの角を持つ div 要素の画像]

答え:

CSS4 プロパティ border-corner-shape はまだ開発の初期段階にありますが、CSS3 変換を使用した回避策を実装できます。

HTML:

<code class="html"><div class="box">
  Text Content
</div></code>

CSS:

<code class="css">.box {
  width: 200px;
  height: 35px;
  line-height: 35px;
  padding: 0 5px;
  background-color: #ccc;
  padding-right: 20px;
  border: solid 1px black;
  border-right: 0;
  position: relative;
}

.box:after {
  content: "";
  display: block;
  background-color: #ccc;
  border: solid 1px black;
  border-left: 0;
  width: 35px;
  height: 35px;
  position: absolute;
  z-index: -1;
  top: -1px;
  right: -17.5px;
  transform: skew(-45deg);
  -o-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
}</code>

この手法では、ベベル効果を実現するために、変換されたスキューと絶対位置を使用して三角形の div 要素を作成します。クラス「box2」を持つ追加の div 要素も HTML と CSS に含まれていることに注意してください。これは、CSS3 宣言を使用しない別のアプローチを示しています。

以上がCSS3 変換を使用して Div 要素にベベルコーナー効果を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。