CSS の単一要素を使用して、内側の丸い境界線を持つ斜めの要素を作成する方法-CSSチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-10-31 04:55:02

オリジナル

378 人が閲覧しました

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>

ログイン後にコピー

このアプローチでは: