border-corner-shape を使用せずに CSS でブロック div のベベルコーナーを作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

border-corner-shape を使用せずに CSS でブロック div のベベルコーナーを作成するにはどうすればよいですか?

DDD

リリース： 2024-10-27 10:07:03

オリジナル

721 人が閲覧しました

How can you create beveled corners for block divs in CSS without using border-corner-shape?

CSS でブロック Div のベベルコーナーを実現する

ブロック Div をベベルコーナーでスタイル設定するタスクには、さまざまな方法でアプローチできます。。 CSS4 border-corner-shape はオプションのままですが、その実装はまだ保留中です。したがって、CSS3 変換を使用したソリューションについて詳しく説明します。

CSS3 変換を使用した実装

HTML ドキュメント内で、目的のクラスを持つ div 要素を作成します。ブロックの名前。

HTML:

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

ログイン後にコピー

次のように CSS でスタイルを定義します:

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);
}

ログイン後にコピー

このソリューションでは、元の境界線のプロパティがそのまま維持され、さらに調整できるようになります。実際のデモについては、提供されている JSBin デモを参照してください。

2 番目の Div を使用した代替ソリューション

簡単にするために、以下を使用して同様の結果を達成する別の CSS 実装を検討してください。 CSS3 を使用しない 2 番目の div。前に提供した CSS 内の box2 クラスを参照してください。

以上がborder-corner-shape を使用せずに CSS でブロック div のベベルコーナーを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。