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

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

Web デザインでは、複雑なグラフィック要素を正確かつ応答性よく複製するのが難しい場合がありますCSSを使用して。そのような課題の 1 つは、内側の丸い境界線の上部を持つ斜めの要素を作成することです。

HTML 構造の定義

まず、HTML 構造を定義しましょう:

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

の実装CSS

要素を傾斜させ、内側の丸い境界線の上部を追加するには、次の CSS を使用します:

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

この CSS は、ベースとして機能する傾斜した要素を作成します。内側の丸いボーダー上部用。 :before 疑似要素は青い領域を丸い角で塗りつぶし、:after 疑似要素は放射状のグラデーション効果を追加して内側の境界線を作成します。

スキューと内側の境界線の組み合わせ

斜めの要素と内側の境界線を組み合わせることで、目的の結果が得られます。効果:

<code class="css">.header {
    border-top: 20px solid blue;
    height:100px;
    position: relative;
    overflow: hidden;
}
.header:before {
    content: "";
    vertical-align:top;
    display: inline-block;
    transform-origin: top right;
    transform: skew(-40deg);
    height: 100%;
    width: 50%;
    border-radius: 0 0 20px 0;
    background: blue;
}
.header:after {
    content: "";
    vertical-align:top;
    display: inline-block;
    transform-origin: top right;
    transform: skew(-40deg);
    height: 20px;
    width: 20px;
    margin-left:-1px;
    background: radial-gradient(circle at bottom right, transparent 68%, blue 73%);
}</code>

このメソッドを使用すると、複数の要素を必要とせずに、歪んだ形状と内側の丸い境界線上部の両方を備えた応答性要素を作成できます。このアプローチにより、柔軟性が高まり、実装が容易になります。

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