ホームページ > 記事 > ウェブフロントエンド > CSS を使用して背景の上部にカットアウト カーブを配置するにはどうすればよいですか?
背景の上にカットアウト カーブを配置する方法
目的は、提供された CSS コードを変更してカットアウト カーブを配置することです ( .top) は、右側ではなく、背景 (.box) の上部にあります。
CSS コードの説明:
元のコードでは、.top要素は、transform:translateY(-100%) を使用して、親 .box を基準にして配置されます。これにより、効果的に背景の下に配置されます。
カーブを上部に移動するには、次の操作を行う必要があります。
改訂された 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; }
仕組み:
これらの変更を実装することにより、カットアウト カーブは希望どおりに背景の上に配置されるようになります。
以上がCSS を使用して背景の上部にカットアウト カーブを配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。