CSS の単一要素を使用して、内側の丸い境界線を持つ斜めの要素を作成する方法

CSS 要素をスキューして内側の丸い境界線上部を実現する

CSS でグラフィック デザインを複製しながらレスポンシブ デザインを実現すると、特に次のような場合に課題が生じる可能性があります。歪んだ形状や内側の丸い境界線などの要素を扱います。この記事では、ユーザーが -40 度のスキューと、キーの形をしたボタンのように要素の周囲を囲む内側の丸い境界線を持つ要素を作成しようとする特定の問題に対処します。

オリジナルの HTML と CSS

提供される HTML は、単純な

で構成されています。 <ナビゲーション>要素:

<code class="html"><header>
  <nav></nav>
</header></code>

対応する CSS には次のものが含まれます:

<code class="css">body > header > nav {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100vw;
  height: 90px;
  padding: 10px 0;
  text-align: center;
  z-index: 1
}
body > header > nav::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 80vw; height: 100%;
  background-color: rgb(147, 147, 147);
  border-bottom-right-radius: 15px;
  transform: skew(-40deg);
  transform-origin: 100% 0%;
}
body > header > nav::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 28.7%;
  border-top: 7px solid rgb(147, 147, 147);
  border-left: 50px solid rgb(147, 147, 147);
  height: 75px;
  border-top-left-radius: 75px;
  transform: skew(-33deg);
}</code>

このアプローチでは、2 つの要素を使用して、歪んだ形状と内側の境界線をシミュレートします。ただし、ユーザーは、複数の要素を必要としない、より単純なソリューションを求めています。

単一要素を使用した代替アプローチ

よりクリーンで応答性の高いデザインを実現するには、次の HTML と CSS で単一の要素を利用できます:

<code class="html"><div class="header"></div></code>

<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>

このアプローチでは:

• .header 要素は、青色の .header 要素として機能します。実線の上の境界線、100 ピクセルの高さ、相対位置。
• :before 疑似要素と :after 疑似要素は、それぞれ、斜めの形状と内側の丸い境界線を作成します。
• 斜め変換は、両方の擬似要素です。
• :before 擬似要素は、右下の境界線の半径が 20 ピクセルの青色のメインの歪んだ形状を形成します。
• :after 擬似要素は、内側の要素を作成します丸い境界線。シームレスな遷移のためにわずかに左側に配置されます。

この方法では、ビューポートに合わせて要素のサイズと形状が自動的に調整されるため、レスポンシブなデザインが可能になります。さらに、:after 疑似要素でグラデーション背景を使用すると、滑らかな内側の境界線効果が作成されます。

以上がCSS の単一要素を使用して、内側の丸い境界線を持つ斜めの要素を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。