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

Linda Hamilton
リリース: 2024-10-31 04:55:02
オリジナル
277 人が閲覧しました

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!