CSS で内側の丸い境界線を持つ斜めの要素を作成するにはどうすればよいですか?

内側の丸い境界線を使用して要素を傾斜させる

CSS を使用して、傾斜した要素を特徴とするグラフィック デザインを複製することを目的としています。内側の丸い境界線。 2 つの要素を使用して静的バージョンを作成しましたが、応答性を高めるという課題に直面しています。

この効果を作成するには、1 つの要素を利用しましょう。

<code class="css">.header {
  border-top: 20px solid blue;
  height: 100px;
  position: relative;
  overflow: hidden;
}</code>

次に、 :before および :after 擬似要素を追加して、歪んだ形状を作成します:

<code class="css">.header:before,
.header:after {
  content: "";
  vertical-align: top;
  display: inline-block;
  transform-origin: top right;
  transform: skew(-40deg);
}</code>

内側の丸い境界線のスタイルを設定するには、:before 擬似要素を調整します:

<code class="css">.header:before {
  height: 100%;
  width: 50%;
  border-radius: 0 0 20px 0;
  background: blue;
}</code>

最後に、内側の丸い角の右下にグラデーションを追加します。

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

このアプローチでは、2 つの要素の機能が 1 つの要素に結合され、応答性が向上します。

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