CSS を使用して逆円または切り抜き円形状を作成するにはどうすればよいですか?

CSS 3 図形: "逆円" または "切り抜き円"

CSS では、逆円または切り抜き円は、円に似た形状です。切り欠き部分。これはさまざまな手法を使用して実現できますが、次の 2 つの一般的な方法があります。

ネストされた要素と絶対配置を使用する

この方法では、2 つのネストされた要素、内側の円 (#a) を作成して、実線の円形部分と、内側の円の後ろに配置するための負の Z インデックスを含む外側の形状 (#b)。外側の形状には、CSS 境界線と負のマージン/パディング調整によって実現される曲線状のカットアウト セクションがあります。

コード例:

<div>

.inversePair {
  border: 1px solid black;
  background: grey;
  display: inline-block;
  position: relative;
  height: 100px;
  text-align: center;
  line-height: 100px;
  vertical-align: middle;
}

#a {
  width: 100px;
  border-radius: 50px;
}

#a:before {
  content: ' ';
  left: -6px;
  top: -6px;
  position: absolute;
  z-index: -1;
  width: 112px;
  height: 112px;
  border-radius: 56px;
  background-color: white;
}

#b {
  width: 200px;
  z-index: -2;
  padding-left: 50px;
  margin-left: -55px;
  overflow: hidden;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  -moz-border-radius-bottomright: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

#b:before {
  content: ' ';
  left: -58px;
  top: -7px;
  position: absolute;
  width: 114px;
  height: 114px;
  border-radius: 57px;
  background-color: black;
}

放射状背景グラデーションと絶対配置の使用

もう 1 つの方法では、CSS3 放射状背景グラデーションを使用して円を作成し、負のマージンの絶対位置 div を配置して、カットアウトエフェクト。このオプションは、CSS 放射状グラデーションをサポートするブラウザに適しています。

コード例:

<div>

.inversePair {
  border: 1px solid black;
  display: inline-block;
  position: relative;
  height: 100px;
  text-align: center;
  line-height: 100px;
  vertical-align: middle;
}

#a {
  width: 100px;
  border-radius: 50px;
  background: grey;
  z-index: 1;
}

#b {
  width: 200px;
  padding-left: 30px;
  margin-left: -30px;
  border-left: none;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  -moz-border-radius-bottomright: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background-image: /* radial-gradient syntax for various browsers */;
}

これらの手法は、画像に依存せずに CSS で逆円または切り抜き円を作成するための柔軟なオプションを提供します。適切な選択は、ブラウザーの互換性、デザイン要件、および必要な効果によって異なります。

以上がCSS を使用して逆円または切り抜き円形状を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。