CSS を使用して背景の上部にカットアウト カーブを配置するにはどうすればよいですか?

背景の上にカットアウト カーブを配置する方法

目的は、提供された CSS コードを変更してカットアウト カーブを配置することです ( .top) は、右側ではなく、背景 (.box) の上部にあります。

CSS コードの説明:

元のコードでは、.top要素は、transform:translateY(-100%) を使用して、親 .box を基準にして配置されます。これにより、効果的に背景の下に配置されます。

カーブを上部に移動するには、次の操作を行う必要があります。

1. .box コンテナの上部のマージンを調整して、その上にスペースを作成します。 .
2. 疑似要素を使用して .top 要素を再配置し、上部に曲線を作成します。

改訂された CSS コード:

.box {
  margin-top:90px;
  width:200px;
  height:100px;
  background:white;
  position:relative;
}

.box:before,
.box:after{
  content:"";
  position:absolute;
  bottom:100%;
  width:50%;
  left:0;
  height:80px;
  background:
    radial-gradient(50% 100% at bottom left, #fff 98%,#0000) top,
    radial-gradient(50% 100% at top right  , #0000 98%,#fff) bottom;
  background-size:100% 50%;
  background-repeat:no-repeat;
}
.box:after {
  transform-origin:right;
  transform:scaleX(-1);
}
body {
  background:pink;
}

仕組み:

• .box コンテナのマージントップは 90 ピクセルになり、その上にカットアウト カーブ用のスペースが確保されます。
• .top 要素が削除され、.box コンテナの下に 2 つの疑似要素が作成されます。
• これらの疑似要素は、グラデーションを使用して曲線形状を作成します。
• transform-origin:right および transform :scaleX(-1) は、カーブを水平方向に反転するために 2 番目の疑似要素で使用されます。

これらの変更を実装することにより、カットアウト カーブは希望どおりに背景の上に配置されるようになります。

以上がCSS を使用して背景の上部にカットアウト カーブを配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。