CSS を使用して、丸い境界線を持つレスポンシブな斜めの要素を作成するにはどうすればよいですか?

斜めの境界線と内側の丸い境界線を使用した要素のスタイル化

CSS を使用してグラフィック デザインを複製しようとすると、ユーザーは望ましい美学を備えた応答性の高いレイアウトを実現するという課題に直面しました。資質。元のデザインは、丸い境界線を持つ斜めの要素を特徴としており、ユーザーの現在の CSS アプローチには、目的の結果を達成するために 2 つの要素が含まれています。

ユーザーのコードには、丸い上部と斜めの効果のための before 要素の作成が含まれます。サイドスキューの後の要素。ただし、このアプローチでは応答性を実現する際に制限があります。

この問題に対処するには、単一の要素を使用し、CSS のスキューとボーダー半径のプロパティに依存して目的の効果を実現する、簡素化された CSS アプローチを選択できます。

改訂された CSS 実装は次のとおりです。

<code class="css">.header {
  border-top: 20px solid blue;
  height:100px;
  position: relative;
  overflow: hidden;
}
.header:before,
.header:after {
  content: "";
  vertical-align:top;
  display: inline-block;
  transform-origin: top right;
  transform: skew(-40deg);
}

.header:before {
  height: 100%;
  width: 50%;
  border-radius: 0 0 20px 0;
  background: blue;
}

.header:after {
  height: 20px;
  width: 20px;
  margin-left:-1px;
  background: radial-gradient(circle at bottom right, transparent 68%, blue 73%);
}</code>

このアプローチでは、単一の要素が作成され、skew プロパティと border-radius プロパティを使用してスタイル設定されます。 before 要素は青い斜めの背景を作成し、after 要素は放射状のグラデーションを使用して内側の丸い境界線を追加します。この簡素化されたアプローチにより、応答性と柔軟性が向上します。

以上がCSS を使用して、丸い境界線を持つレスポンシブな斜めの要素を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。