CSS で反転した丸い角を作成するにはどうすればよいですか?

CSS で反転した丸い角を実現する

CSS では、ボーダーを使用して要素の左上隅を丸いと定義できます。 radius-topleft プロパティ。ただし、この角を反転して反転効果を作成したい場合はどうすればよいでしょうか?

従来、丸い角を反転することは標準の CSS では実現できませんでした。ただし、最新のブラウザでは、mask-image プロパティを使用したソリューションが導入されています。

解決策:

丸い角を反転するには、mask-image を使用して放射状グラデーションを定義します。円形の切り抜きを作成します。

#aux-container {
  width: 100px;
  height: 100px;
  background: #f00;
  -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);
}

この例では、背景が赤いコンテナが放射状のグラデーションでマスクされています。これにより、左上隅に 10 ピクセルの円形の切り抜きが作成されます。透明な領域は徐々に黒に移行し、残りの角を覆います。

マスク イメージを利用すると、丸い角を効果的に反転して、デザインにユニークで視覚的に魅力的なタッチを与えることができます。

以上がCSS で反転した丸い角を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。