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

Skewing an Element with an Inner Rounded Border

You're aiming to replicate a graphical design using CSS, featuring a skewed element with an inner rounded border. While you've achieved a static version using two elements, you're facing challenges in making it responsive.

To create this effect, let's utilize a single element:

<code class="css">.header {
  border-top: 20px solid blue;
  height: 100px;
  position: relative;
  overflow: hidden;
}</code>

Then, add a :before and :after pseudo-element to create the skewed shape:

<code class="css">.header:before,
.header:after {
  content: "";
  vertical-align: top;
  display: inline-block;
  transform-origin: top right;
  transform: skew(-40deg);
}</code>

To style the inner rounded border, adjust the :before pseudo-element:

<code class="css">.header:before {
  height: 100%;
  width: 50%;
  border-radius: 0 0 20px 0;
  background: blue;
}</code>

Finally, add the gradient for the inner rounded corner's bottom right:

<code class="css">.header:after {
  height: 20px;
  width: 20px;
  margin-left: -1px;
  background: radial-gradient(circle at bottom right, transparent 68%, blue 73%);
}</code>

This approach combines the functionality of the two elements into a single element, allowing for easier responsiveness.

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