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

Linda Hamilton
Release: 2024-10-31 00:58:29
Original
105 people have browsed it

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!