純粋な CSS を使用して、境界線が保持された斜めのコーナーを作成するにはどうすればよいですか?

CSS の角度付きコーナー: 詳細

純粋な CSS を使用して角度付きコーナーを作成することは、特に国境。ただし、:before 要素と :after 要素を注意深く操作すると、ほぼ近似することが可能です。

ステップ 1: 境界線のあるコンテナ

まず、目的の角度の付いた形状を保持するコンテナへの境界線。

ステップ 2: :コーナーの場合の前Blackout

次に、特定の隅をブロックする :before 要素を作成します。境界線を確実にカバーするには、-1px オフセットします。

ステップ 3: 内側の線の場合

カットオフ コーナー内の斜めの線の場合、 :after 要素を導入します。これを :before 要素からわずかにオフセットします。

コード例:

.cutCorner {
  position: relative;
  background-color: blue;
  border: 1px solid silver;
  display: inline-block;
}
.cutCorner img {
  display: block;
}
.cutCorner:before {
  position: absolute;
  left: -1px;
  top: -1px;
  content: '';
  border-top: 70px solid silver;
  border-right: 70px solid transparent;
}
.cutCorner:after {
  position: absolute;
  left: -2px;
  top: -2px;
  content: '';
  border-top: 70px solid white;
  border-right: 70px solid transparent;
}

ソリューションで説明したように、45 度の線の太さを維持するには、問題です。ただし、このアプローチは、境界線のある斜めのコーナーを作成するための実行可能なソリューションを提供します。

以上が純粋な CSS を使用して、境界線が保持された斜めのコーナーを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。