CSS3 変換を使用してブロック Div にベベルコーナーを作成する方法

ブロック Div のベベルコーナーのスタイリング

提供された HTML ドキュメントでは、実線の境界線を持つ標準ブロック div が定義されています。目標は、div の右側に面取りされたコーナー効果を作成することです。

CSS3 を使用してこの効果を実現するには、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>

このアプローチには、.box の後の要素として追加の div を追加することが含まれます。この div は、.box 要素の上に絶対的に配置され、斜角効果を作成するための斜めの変換が行われます。

詳細については、回答で提供されている JSBin デモを参照してください。この例には、CSS3 宣言を使用しない代替実装を示す別の div クラス (box2) も含まれていることに注意してください。

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