ホームページ  >  記事  >  ウェブフロントエンド  >  CSS 疑似要素を使用して上部が湾曲した背景を作成するにはどうすればよいですか?

CSS 疑似要素を使用して上部が湾曲した背景を作成するにはどうすればよいですか?

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-10-31 06:46:02593ブラウズ

How to Create a Top-Curved Background with CSS Pseudo Elements?

擬似要素を含む上部の曲線の背景

上部に微妙な曲線の切り抜きを付けて背景画像を強化するには、CSS 擬似の力を利用します。要素。この課題には、希望の位置で背景と重なるように切り抜きを適切に配置することが含まれます。元のコードを変更すると、次の効果を実現できます:

<code class="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;
}</code>

以上がCSS 疑似要素を使用して上部が湾曲した背景を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。