CSS3 変換を使用してブロック Div のベベルコーナーを実現するにはどうすればよいですか?

ブロック Div の角を面取りする

課題

「block1」クラスのブロック div を含む HTML ドキュメントでは、目標は、提供された画像に示すように、div の右側に面取りされたコーナーを作成することです。

解決策

今後の CSS4 border-corner-shape を利用せずにこの効果を実現するには

実装

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>

説明

この実装には次の手法が含まれています:

• CSS3 変換: スキュー変換プロパティは、追加された div を 45 度回転します。
• 絶対配置: 追加された div は、top および right プロパティを使用して絶対的に配置され、面取りされたコーナーを作成します。
• Negative Z-Index: 追加された div には、元の div の後ろに来るように負の Z-index が与えられます。
• 境界線の操作: 元の div の境界線の右は 0 に設定されます。ベベルエッジに 2 番目の境界線ができないようにします。
• パディング変更: 削除された 1 ピクセルの境界線を補うために、元の div のパディング右が 1 ピクセル増加します。

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