CSS で内側の丸い境界線を持つ斜めの要素を作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-10-31 00:58:29

オリジナル

206 人が閲覧しました

How to Create a Skewed Element with an Inner Rounded Border in 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 サイトの他の関連記事を参照してください。