CSS 放射状グラデーションを使用して側面が丸い透明な曲線形状を作成する方法

CSS 2 つの丸い側面を持つ透明な曲線形状

曲線状の透明な形状の作成は、特に丸みを帯びた形状にしたい場合には困難になることがあります。側面。この記事では、radial-gradient を使用した解決策を検討します。

最初の試行

最初に、絶対位置と曲線状の境界半径。ただし、背景は不透明なままで、青い背景色が透けて見えません。

Radial-gradient を使用した解決策

より良い解決策は、radial-gradient を使用して作成することです。透明で湾曲した形状の錯覚。放射状グラデーションを使用すると、特定の点から開始して外側に放射状に広がるグラデーションを定義できます。

CSS:

.box {
  width: 200px;
  height: 100px;
  background: white;
}
.box .top {
  height: 100px;
  width: 150px;
  transform: translateY(-100%);
  background: #fff;
  position: relative;
}

.top:before,
.top:after {
  content: "";
  position: absolute;
  top: 0;
  width: 50px;
  left: 100%;
  bottom: 50%;
  background:
    radial-gradient(100% 50% at top left, #fff 98%, transparent 100%) right,
    radial-gradient(100% 50% at bottom right, transparent 98%, #fff 100%) left;
  background-size: 50% 100%;
  background-repeat: no-repeat;
}

.top:after {
  transform-origin: bottom;
  transform: scaleY(-1);
}

説明

.box 要素は、曲線形状のコンテナとして機能します。その中で、.top 要素は絶対的に配置され、上方に (-100%) 変換されて形状が作成されます。

.top 要素には、放射状グラデーションを使用した曲線効果。これらの疑似要素は、.top 要素の左上隅と右下隅に、幅 50 ピクセルで配置されます。

放射状グラデーションは、左上と下から始まるように定義されています。それぞれ右隅。最初のグラデーションは右側に白 (不透明) セクションを作成し、下端から 2% 上の透明な部分にフェードインします。 2 番目のグラデーションはその逆で、左側に透明な部分、下部に白い部分を作成します。

これらのグラデーションを組み合わせることで、透明で湾曲した形状の錯覚が作成されます。

以上がCSS 放射状グラデーションを使用して側面が丸い透明な曲線形状を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。