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

CSS Skew Element and Achieve Inner Rounded Border Top

Achieving a responsive design while replicating a graphical design in CSS can present challenges, especially when dealing with elements like skewed shapes and inner rounded borders. In this article, we'll address a specific issue where a user seeks to create an element with a skew of -40deg and an inner rounded border that wraps around the element like a key-shaped button.

Original HTML and CSS

The provided HTML comprises a simple

with a

element:

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

The corresponding CSS includes:

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

This approach employs two elements to simulate the skewed shape and inner border. However, the user seeks a more straightforward solution that eliminates the need for multiple elements.

Alternative Approach with a Single Element

To achieve a cleaner and more responsive design, we can utilize a single element with the following HTML and 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>

In this approach:

• The .header element serves as the single element with a blue solid top border, height of 100px, and relative positioning.
• The :before and :after pseudo-elements create the skewed shape and inner rounded border, respectively.
• The skew transform is applied to both pseudo-elements.
• The :before pseudo-element forms the main blue-colored skewed shape with a bottom-right border radius of 20px.
• The :after pseudo-element creates the inner rounded border, which is positioned slightly to the left for a seamless transition.

This method allows for a responsive design as the element can automatically adjust its size and shape to fit the viewport. Additionally, the use of a gradient background on the :after pseudo-element creates a smooth inner border effect.

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