How to Create a Skewed Element with an Inner Rounded Border Top Using CSS?

CSS Skew Element and Achieve Inner Rounded Border Top

In web design, it can be challenging to replicate complex graphical elements with precision and responsiveness using CSS. One such challenge is creating a skewed element with an inner rounded border top.

Defining the HTML Structure

First, let's define the HTML structure:

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

Implementing the CSS

To skew the element and add the inner rounded border top, we'll use the following 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>

This CSS creates a skewed element that serves as the base for the inner rounded border top. The :before pseudo-element fills in the blue area with a rounded corner, while the :after pseudo-element adds the radial gradient effect to create the inner border.

Combining Skew and Inner Border

By combining the skewed element and the inner border, we achieve the desired effect:

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

This method allows us to create a responsive element with both a skewed shape and an inner rounded border top without the need for multiple elements. This approach offers greater flexibility and ease of implementation.

The above is the detailed content of How to Create a Skewed Element with an Inner Rounded Border Top Using CSS?. For more information, please follow other related articles on the PHP Chinese website!