CSS3 変換を使用してブロック div の角を面取りするにはどうすればよいですか?

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

CSS4 の border-corner- 以前は、ブロック div の角を面取りするのが課題でした。形状プロパティ。ただし、CSS3 変換を使用すると、将来の使用のために枠線プロパティを保持しながらこの効果を作成できます。

HTML 構造と CSS スタイルを調べて、面取りされたコーナーを作成してみましょう:

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; /* pull it up because of 1px border */
  right: -17.5px; /* 35px / 2 */
  transform: skew(-45deg);
  -o-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
}</code>

CSS コードでは、擬似要素を使用して面取りされたコーナーを作成します。この疑似要素は絶対的に配置され、メイン div の後ろに確実に配置されるように負の Z インデックスを持ちます。 skew() 変換は角を回転するために適用されます。

面取りされた角の錯覚を作成するために、border-right プロパティが 0 に設定されていることに注意することが重要です。視覚的にきれいなコーナーを確保するために、擬似要素の border-left プロパティも 0 に設定されます。

このテクニックは、ブロック div に面取りされたコーナーを効果的に追加し、より視覚的に魅力的なデザインを可能にします。

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